3분만에 CSS 글리치 텍스트 공개 😎

다음 프로젝트에서 흥미로운 텍스트 애니메이션을 찾고 계십니까? 이 게시물에서는 다음과 같은 텍스트 공개 애니메이션을 만들 것입니다.


작동 중인 글리치 텍스트 공개 😎

이를 위해 CSS 변수 범위 💪의 힘을 활용할 것입니다.



캠프 TL;DR에 있는 분들은 아래로 스크롤하여 데모 및 코드를 확인하세요 👍

부인 성명

이 효과는 HTML & CSS 에서만 달성할 수 있습니다. 마크업을 강화하기 위해 약간JavaScript을 사용하고 있습니다. 새로 고칠 때마다 상황이 달라집니다. 자바스크립트가 아닌 버전도 공유하겠습니다 👍

마크업

가장 먼저 필요한 것은 마크업입니다 ✅

<p>Glitchy Text Reveal!</p>

자바스크립트

여기 그 자바스크립트가 있습니다.

const { Splitting } = window
const RESULTS = Splitting()
// Set of characters we can use to glitch through
const GLITCH_CHARS = '`¡™£¢∞§¶•ªº–≠åß∂ƒ©˙∆˚¬…æ≈ç√∫˜µ≤≥÷/?░▒▓<>/'.split('')
// Loop through our Splitting results and apply CSS variables.
// The results contain an Array of spans that are the characters.
for (let r = 0; r < RESULTS.length; r++) {
  const CHARS = RESULTS[r].chars
  for (let c = 0; c < CHARS.length; c++) {
    // We are going to inline 10 CSS variables
    for (let g = 0; g < 10; g++) {
      CHARS[c].style.setProperty(
        `--char-${g}`,
        `"${GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)]}"`
      )
    }
  }
}

우리는 텍스트를 범위로 분할하기 위해 화려한Splitting.js를 사용하고 있습니다.

이를 통해 개별 문자를 선택할 수 있습니다. 😎 결과가 나오면 문자 요소를 반복하고 인라인CSS 변수를 적용합니다. 이러한 변수는 글리치 문자가 표시되어야 하는 것을 지시합니다.

문자에 대한 결과 마크업은 다음과 같을 수 있습니다.

<span
  class="char"  
  data-char="G"
  style="
    --char-0:'˙';
    --char-1:'§';
    --char-2:'º';
    --char-3:'∞';
    --char-4:'˙';
    --char-5:'▒';
    --char-6:'˙';
    --char-7:'µ';
    --char-8:'£';
    --char-9:'<';">
    l
</span>

CSS

먼저 캐릭터를 복제하기 위해 의사 요소의 스타일을 지정해야 합니다. 그런 다음 원본을 숨깁니다.

[data-char] {
  color: transparent;
  position: relative;
}
[data-char]:after {
  --txt: attr(data-char);
  animation-duration: 0.2s;
  animation-delay: 0.5s;
  animation-timing-function: steps(1);
  animation-fill-mode: backwards;
  content: var(--txt);
  color: var(--color);
  position: absolute;
  left: 0;
  top: 0;
}

콘텐츠가 CSS 변수로 어떻게 채워지는지 확인하세요 👍

트릭이 있습니다. 우리는 CSS 변수 범위를 활용하여 "모두에게 적합한 하나의 애니메이션"유형의 시나리오를 만들 것입니다. keyframes 속성을 전환할 content 세트를 정의합니다. 무엇으로 전환해야 하는지 어떻게 알 수 있습니까? 이전에 설정한 인라인 변수를 참조합니다 😉

@keyframes glitch-switch {
  0% { content: var(--char-0); }
  10% { content: var(--char-1); }
  20% { content: var(--char-2); }
  30% { content: var(--char-3); }
  40% { content: var(--char-4); }
  50% { content: var(--char-5); }
  60% { content: var(--char-6); }
  70% { content: var(--char-7); }
  80% { content: var(--char-8); }
  90% { content: var(--char-9); }
  100% { content: var(--char-0); }
}

그게 다야!



그래도 별로 흥미롭지 않죠? 효과를 변경하기 위해 animation-iteration-count로 재생해 봅시다. 인라인 CSS 변수로 정의된 임의 반복 횟수는 어떻습니까?

다음과 같이 카운트 변수를 인라인할 수 있습니다.

CHARS[c].style.setProperty('--count', Math.random() * 5 + 1)

그런 다음 CSS에 적용합니다.

animation-iteration-count: var(--count);

우리에게 이런 것을 줘! 🎉

접근성

이것을 접근 가능하게 만드는 방법을 언급할 가치가 있습니다. 가장 간단한 해결책은 텍스트를 복제하고 글리치 텍스트에 적용aria-hidden하는 것입니다 👍

그게 다야!

CSS 글리치 텍스트가 3분 안에 공개됩니다! 다양한 타이밍 동작에 대한 데모를 확인하십시오.



질문이나 제안 사항이 있으면 언제든지 답장을 남겨주시거나 소셜에서 저와 소통하세요! 🤓

그리고 여기 CSS 전용 버전이 있습니다 😉 제가 잊었다고 생각하셨죠? 다음 시간까지 👋