Source: Dev.to

스타워즈 슬라이딩 텍스트 애니메이션

스타워즈 팬이라면 영화 시작 부분에 나오는 오프닝 크롤을 기억하고 있을 겁니다.
이번 포스트에서는 HTML과 CSS만을 사용해 그 효과를 직접 구현해 보는 방법을 소개합니다.

1. 기본 HTML 구조

아래와 같이 간단한 마크업을 작성합니다.
<section> 요소 안에 크롤 텍스트를 담을 <div class="crawl">와 배경을 담당할 <div class="star-wars">를 배치합니다.

<section class="star-wars">
  <div class="crawl">
    <p class="title">Episode IV</p>
    <p class="subtitle">A NEW HOPE</p>
    <p class="content">
      It is a period of civil war....
    </p>
  </div>
</section>

2. CSS 스타일링

기본 레이아웃

.star-wars {
  position: relative;
  height: 100vh;
  overflow: hidden;
  perspective: 400px;
  background: #000;
}

• perspective 속성을 이용해 3D 효과를 부여합니다.
• overflow: hidden으로 화면 밖으로 나가는 부분을 가립니다.

크롤 텍스트

.crawl {
  position: absolute;
  bottom: -100%;
  width: 100%;
  transform-origin: 50% 100%;
  animation: crawl 60s linear forwards;
}

• bottom: -100%는 텍스트가 화면 아래에서 시작하도록 합니다.
• transform-origin을 설정해 회전 축을 지정하고, 이후 animation으로 움직임을 정의합니다.

타이틀 및 서브타이틀

.title,
.subtitle {
  font-family: 'Star Jedi', sans-serif;
  text-align: center;
  color: #ffcc00;
}

스타워즈 느낌을 살리기 위해 별도 폰트를 적용했습니다.

3. 애니메이션 키프레임

@keyframes crawl {
  0% {
    bottom: -100%;
    transform: rotateX(20deg) translateZ(0);
  }
  100% {
    bottom: 100%;
    transform: rotateX(20deg) translateZ(-3000px);
  }
}

• translateZ를 이용해 텍스트가 화면 안쪽으로 사라지는 듯한 효과를 줍니다.
• rotateX(20deg)는 텍스트가 약간 기울어지게 하여 원본 오프닝과 비슷하게 만듭니다.

4. 결과 확인

위 코드를 모두 적용하면 아래와 같은 결과를 얻을 수 있습니다.

Tip:

• animation-duration 값을 조절하면 텍스트가 지나가는 속도를 바꿀 수 있습니다.
• perspective 값을 크게 하면 더 깊이감 있는 효과를 얻을 수 있습니다.

마무리

HTML과 CSS만으로도 충분히 스타워즈 오프닝 크롤을 재현할 수 있습니다.
추가적인 자바스크립트를 사용하면 텍스트를 동적으로 교체하거나, 여러 에피소드를 순차적으로 보여주는 등 다양한 확장이 가능합니다.

즐거운 코딩 되세요! 🚀