Рубрики
Без рубрики

CSS Glitchy Text раскрывается за 3 минуты 😎

Ищете интересную текстовую анимацию в вашем следующем проекте? В этом посте мы собираемся сделать … с меткой CSS, JavaScript, Animation, Design.

Ищете интересную текстовую анимацию в вашем следующем проекте? В этом посте мы собираемся сделать следующий текст раскрыть анимацию.

Для этого мы используем мощность вариабельной области CSS 💪

Для тех, кто находится в лагере TL; DR , прокрутите вниз для демонстраций и кода 👍

Отказ от ответственности

Этот эффект достижим только с Html & CSS . Я использую немного JavaScript Чтобы улучшить разметку. Это отличает ситуацию на каждом обновлении. Я также поделюсь не Javascript, хотя 👍

Разметка

Первое, что нам нужно, это какая -то разметка ✅

Glitchy Text Reveal!

JavaScript

Вот этот JavaScript.

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 переменные. Эти переменные определяют, что должны показать глюковые персонажи.

Полученная наценка для персонажа может выглядеть примерно так.


    l

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 это переключит Контент имущество. Как он узнает, на что переключиться? Он будет ссылаться на те встроенные переменные, которые мы установили ранее 😉

@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); }
}

Вот и все!

Это не очень интересно, не так ли? Давайте поиграем с анимация-поиск-сет изменить эффект. Как насчет случайного количества итерации, определяемого встроенной переменной CSS?

Мы могли бы внедрить такую переменную подсчета;

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

А затем примените это в нашем CSS;

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

Дайте нам что -то подобное! 🎉

Доступность

Стоит упомянуть, как сделать это доступным. Самое простое решение – дублировать текст и применить ария-скрытая к нашему глюковому тексту 👍

ЭТО ОНО!

CSS Glitchy Text раскрывается за 3 минуты! Обязательно ознакомьтесь с демонстрацией для различных временных поведений.

Как всегда, любые вопросы или предложения, пожалуйста, не стесняйтесь оставить ответ или Твитнуть меня 🐦! И обязательно общайтесь со мной в социальных сетях! 🤓

И вот эта версия только CSS 😉 Ты думал, что я забыл, не так ли? До скорого 👋

Оригинал: “https://dev.to/jh3y/css-glitchy-text-reveal-in-3-minutes-24pb”

Читайте ещё по теме: