텍스트 던지기 - 키네틱 타이포그래피 파트 1: 쌀쌀한 워밍업 📝❇️ 🚀

Part 1 of a new series! Let's build some kinetic typography with HTML, CSS and JS!

그래서, 이것은 무엇에 관한 것입니까?

나는 최근에 2022년의 6가지 디자인 트렌드에 대해 보았다. 타임스탬프 5:44에서 그는 소위 "키네틱 타이포그래피"에 대해 이야기합니다. 그것은 즉시 내 관심을 끌었습니다. 부분적으로는 움직이는 물건을 좋아하기 때문에(쉿!), 다른 부분은 "내가 그것을 만들 수 있을까?"라고 자문했습니다.

내가 찾은 대부분의 키네틱 타이포그래피는 After Effects로 수행되므로 대부분 비디오와 gif입니다. 반면에 웹의 키네틱 타이포그래피는 아직 그다지 중요하지 않은 것 같습니다. 페이드와 함께 한 줄씩 나타나는 텍스트에 대해 말하는 것이 아닙니다. 이것은 키네틱 타이포그래피로 간주될 수 있지만 이미 오래 전부터 적어도 수십 개의 웹 사이트에서 수행되었습니다. 아니요, 여기서 크게 얘기하고 있습니다. 빙글빙글 돌고, 날고, 헤엄치고, 떨어지고, 부서지고, 모든 종류의 것들.

오늘 저는 HTML과 CSS를 사용하여 키네틱 타이포그래피의 10가지 비디오 예제 중 첫 번째를 재구성할 것입니다. 나는 미래의 물리학 라이브러리를 사용할 수 있습니다. 아마도, 봅시다. (나는 처음부터 전체 2D 물리 엔진을 구축하지 않을 것입니다. 그것은 요점을 놓치게 될 것입니다.)

그럼 먼저 좋은 예시 영상을 찾아보도록 하겠습니다. 이 게시물에서 워밍업을 위해 더 간단한 것으로 시작하고 그랜드 피날레를 위해 가장 복잡한 내용을 유지하겠습니다!

고지 사항: 키네틱 타이포그래피의 움직이고 때로는 화려한 특성으로 인해 저는 단일 프레임의 gif만 표시하고 코딩된 예제가 자동으로 재생되지 않도록 할 것입니다. 나는 내 콘텐츠로 인해 누군가가 아프거나 기분이 나빠지는 것을 원하지 않습니다.

쌀쌀한 워밍업

Popular Search Engine™은 수많은 예제를 제공합니다. 실제로 선택하기가 정말 어렵지만 this COOL example from this listicle on invisionapp.com으로 가보겠습니다.



( Click here for the full gif animation. 경미한 트리거 경고: 일부 사람들은 이 이미지를 너무 오래 보면 멀미를 경험할 수 있습니다. 실제로 화려하지는 않지만 많이 움직입니다.)

워밍업 운동입니다. 자, 시작하겠습니다.

1단계는 다소 접근하기 쉬운 방식으로 텍스트를 코딩하는 것입니다. 각 문자를 개별적으로 애니메이션화해야 하므로 기본적으로 별도의 HTML 요소로 분할해야 합니다. 여전히 스크린 리더에서 액세스할 수 있도록 aria 속성을 사용합니다. 실제 문자 뒤에 이 흑백 그라데이션으로 나타나게 하려면 각 문자가 여러 번 필요합니다.

<div class="bouncy">
  <h1 aria-label="Chilly">
    <span aria-hidden="true" class="text-container">
      <span class="letter">
        <span class="front-letter">C</span>
        <span class="back-letter">C</span>
        <span class="back-letter">C</span>
        <!-- Repeat this a few more times -->
      </span>
      <span class="letter">
        <span class="front-letter">h</span>
        <span class="back-letter">h</span>
        <span class="back-letter">h</span>
        <!-- Repeat this a few more times -->
      </span>
      <span class="letter">
        <span class="front-letter">i</span>
        <span class="back-letter">i</span>
        <span class="back-letter">i</span>
        <!-- Repeat this a few more times -->
      </span>
      <span class="letter">
        <span class="front-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <!-- Repeat this a few more times -->
      </span>
      <span class="letter">
        <span class="front-letter">l</span>
        <span class="back-letter">l</span>
        <span class="back-letter">l</span>
        <!-- Repeat this a few more times -->
      </span>
      <span class="letter">
        <span class="front-letter">y</span>
        <span class="back-letter">y</span>
        <span class="back-letter">y</span>
        <!-- Repeat this a few more times -->
      </span>
    </span>
  </h1>
</div>

다음으로 이 텍스트에 기본적인 스타일을 지정하려면 상용구 CSS가 필요합니다.

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

html, body {
    margin: 0;
    padding: 0;
}
.bouncy-accordion {
    height: 80vh;
    background-color: #BCAD90;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bouncy h1 {
    font-family: 'Bree Serif', serif;
    font-weight: 700;
    font-size: 25vh;
    margin: 0;
    padding: 0;
    color: #fff;
    /* Works in most modern browsers */
    -webkit-text-stroke: 5px #000;
    text-transform: uppercase;
    letter-spacing: -30px;
}

살펴봅시다:



여태까지는 그런대로 잘됐다. 원래 애니메이션에서는 위아래로 튀고 회전하는 것을 볼 수 있습니다. 다음으로 정확하게 수행하기 위해 몇 가지 키프레임을 추가합니다.

@keyframes bouncy {
    0% {
        transform: translateY(-20%) rotate(6deg);
    }
    50% {
        transform: translateY(20%) rotate(-6deg);
    }
    100% {
        transform: translateY(-20%) rotate(6deg);
    }
}

이렇게 하면 문자가 위아래로 변환되고 회전되어 좀 더 생동감이 생깁니다. 예제를 보면 각 문자마다 약간의 지연이 있는 것 같습니다. 그들은 일제히 움직이지 않습니다. 그 뒤에 있는 글자(흑백 줄무늬)도 약간의 지연이 있지만 타이밍이 다릅니다. 작업을 조금 더 간단하게 하기 위해 애니메이션 지연을 처리하기 위해 몇 가지 사용자 정의 CSS 속성을 정의합니다.

.bouncy .letter:nth-child(1) {
    --base-delay: 0ms;
}
.bouncy .letter:nth-child(2) {
    --base-delay: 200ms;
}
.bouncy .letter:nth-child(3) {
    --base-delay: 400ms;
}
.bouncy .letter:nth-child(4) {
    --base-delay: 600ms;
}
.bouncy .letter:nth-child(5) {
    --base-delay: 800ms;
}
.bouncy .letter:nth-child(6) {
    --base-delay: 1000ms;
}

다음으로, 동일한 문자( .back-letter )가 .front-letter 와 겹치도록 모든 문자를 배치합니다. 애니메이션도 추가합니다.

.bouncy .text-container {
    display: block;
    position: relative;
}
.bouncy .letter {
    display: inline-block;
    position: relative;
}
.bouncy .front-letter,
.bouncy .back-letter {
    display: inline-block;
    animation: bouncy 2.5s infinite ease-in-out;
}
.bouncy .front-letter {
    position: relative;
    z-index: 5;
    animation-delay: var(--base-delay);
}
.bouncy .back-letter {
    position: absolute;
    left: 0;
}

이제 마지막 터치를 위해 뒷글자에 색상과 실제 애니메이션 지연을 추가합니다.

.bouncy .back-letter:nth-child(even) {
    /* Keeps the size of the text the same */
    -webkit-text-stroke: 5px #fff;
    color: #fff;
}
.bouncy .back-letter:nth-child(odd) {
    -webkit-text-stroke: 5px #000;
    color: #000;
}

.bouncy .back-letter:nth-child(2) {
    animation-delay: calc(var(--base-delay) + 100ms);
    z-index: 9;
}
.bouncy .back-letter:nth-child(3) {
    animation-delay: calc(var(--base-delay) + 200ms);
    z-index: 8;
}
.bouncy .back-letter:nth-child(4) {
    animation-delay: calc(var(--base-delay) + 300ms);
    z-index: 7;
}
.bouncy .back-letter:nth-child(5) {
    animation-delay: calc(var(--base-delay) + 400ms);
    z-index: 6;
}
/* Repeat this a few more times */

Et voila, 완성된 애니메이션:



그리고 워밍업은 여기까지입니다!


내가 이 글을 쓰면서 즐거웠던 만큼 여러분도 이 글을 즐겁게 읽으셨기를 바랍니다! 그렇다면 ❤️ 또는 🦄를 남겨주세요! 또한 다른 예제가 어떻게 나타나는지 보고 싶다면 저를 따라오세요! 나는 여가 시간에 기술 기사를 쓰고 가끔씩 커피를 마시는 것을 좋아합니다.

내 노력을 지원하고 싶다면 you can offer me a coffee ☕ 또는 ! Paypal을 통해 저를 직접 지원할 수도 있습니다!