Наверняка вы встречали эти завораживающие текстовые анимации в интернете — особенно на сайтах-портфолио или лендингах. Они отлично подходят для демонстрации разных функций, услуг или характеристик. И знаете что? Такой эффект можно создать без анимированных GIF-файлов и даже без JavaScript!
Как работает анимация печатающейся машинки
Вот тот самый эффект, который мы разберем:
CSS-подход к созданию такой анимации я нашел на сайте Дэшила Вуда, хотя похожий эффект встречается повсюду.
Создавая анимацию в CSS, важно заранее все спланировать и четко определить временные интервалы. Точное поведение этой анимации работает так:
Отдельно вторая анимация создает эффект мигающего курсора. Эта анимация намного проще, поэтому начнем именно с нее.
Создаем анимированный курсор
Если вы не знакомы с CSS-анимациями, это отличная отправная точка. Анимация курсора (или "каретки") довольно простая, но хорошо демонстрирует основы анимации в браузере.
Базовый CSS для курсора выглядит так:
Поскольку курсор должен появляться справа от текста, этот CSS использует псевдоэлемент ::after и border-right для создания тонкой вертикальной линии. Свойство content обязательно для отображения псевдоэлемента ::after.
CSS-анимация состоит из двух частей:
Чтобы определить кадры в CSS, начнем с этого синтаксиса, который создает именованную анимацию:
Внутри фигурных скобок нужно определить каждый отдельный этап анимации по его относительному времени и свойствам:
Не все CSS-свойства можно анимировать, поэтому нужно выяснить, какие из них лучше работают для каждой задачи. Мигающий курсор должен переключаться между двумя состояниями: полностью видимым и полностью скрытым. Свойство opacity идеально подходит для такого переключения: его можно анимировать, и оно простое в использовании:
Эти ключевые кадры описывают анимацию, которая начинается с полной непрозрачности (видимый курсор). Затем она переходит к нулевой непрозрачности (невидимый) в середине, а потом возвращается к полной непрозрачности в конце. Поскольку начальное и конечное состояния одинаковы, их можно сгруппировать:
Любой элемент, использующий эти ключевые кадры, теперь будет мигать между видимым и невидимым состояниями согласно настройкам анимации. Свойство animation — это сокращение для множества отдельных свойств:
Для мигающего курсора используем только четыре из них: name, duration, timing-function и iteration-count:
Сначала связываем анимацию с ранее определенными ключевыми кадрами, используя имя blinkingEffect. Продолжительность 0.5s означает, что курсор будет мигать два раза в секунду. Функция времени linear заставляет браузер плавно изменять непрозрачность с постоянной скоростью. Например, в точке 25% непрозрачность будет точно 0.5. Это создает приятный эффект затухания/появления. И наконец, infinite означает, что анимация будет повторяться бесконечно.
Анимируем текст с помощью CSS
Теперь, когда мы освоили основы CSS-анимации на примере простого мигающего курсора, пора переходить к эффекту печатающейся машинки. Покажем, как построить его пошагово, начиная с базовой разметки:
Базовый CSS для этого заголовка использует обычные свойства для стилизации текста:
Как и с мигающим курсором, используем CSS-свойство animation для применения ключевых кадров к элементу внутри заголовка — на этот раз перед заполнителем:
Теперь нужно просто определить соответствующие ключевые кадры для анимации. Начиная с одного слова, можно создать простую анимацию печатания, добавляя каждую букву к содержимому элемента на каждом шаге. Размеры шагов должны составлять 100, деленное на количество шагов — по одному для каждой буквы.
Чтобы показать слово "print", разделим 100 на количество букв (5), получив 20. Теперь используем это как приращение для каждого ключевого кадра:
Еще есть что доработать, но уже видно, как анимация обретает форму:
Теперь попробуем напечатать слово, а затем удалить его. Поскольку удаление просто обращает исходные шаги, можно использовать тот же синтаксис группировки, что и раньше, чтобы применить одно свойство в нескольких точках анимации.
Единственная сложность — правильно определить количество шагов и, следовательно, приращений. Чтобы все оставалось равномерным, понадобится в два раза больше шагов, чем раньше, минус один — поскольку финальный шаг не должен происходить дважды (вскоре разберем, как сделать правильную паузу).
Для "print" это означает 100 / 11 = 9.09 шагов. Для простоты округлим до 9:
Если попробовать эти ключевые кадры, увидим плавный эффект, который печатает слово, затем удаляет его:
Сейчас пауза на полном слове (45%–54%) длится столько же, сколько печатание одного символа. Чтобы увеличить паузу, просто настроим значения ключевых кадров. Например, вместо 9%-ной паузы попробуем 20%-ную. Это оставляет 80% для остальной анимации, что дает 10 шагов по 8% каждый:
На этом этапе для максимальной гибкости полезно подумать о формуле для генерации этих ключевых кадров. Если каждый ключевой кадр длится x% времени, то исходное пятибуквенное слово "print" длилось 20%:
С удалением и паузой (y) получается такая формула:
Если пауза в два раза длиннее, то y = 2x, что можно подставить в формулу выше:
Это дает значение x равное 8.3 с периодом, которое округлим до 8, а затем компенсируем, округлив y в другую сторону — с 16 до 20. Это не очень точно, но вполне подходит для простой анимации. При желании можно использовать значения с большим количеством десятичных знаков для временных интервалов — просто это потребует чуть больше ручных расчетов.
Помните, что полная анимация включает несколько слов, каждое из которых удаляется до последнего. Для этого понадобится формула для вычисления количества "действий" — напечатанных или удаленных символов:
Итак, с "print" (5 * 2 + 1) и "digital" (7) это будет 11 + 7 = 18. С одной паузой между двумя словами предыдущая формула становится:
Для большего количества слов количество пауз на единицу меньше общего количества слов, поэтому для анимации слов "technology", "print", "digital" и "technology" понадобится:
С паузой 7x это дает:
Теперь у нас есть строительные блоки для создания такой анимации с любым набором слов. Просто применяем формулу, вычисляем временные интервалы и пишем CSS.
Почему это лучше JavaScript?
В JavaScript нет встроенного эквивалента CSS-анимации. Можно либо написать собственный код анимации — что довольно большая задача — либо использовать стороннюю библиотеку типа Anime.js. Но даже в этом случае придется изучать, как ее использовать.
Уменьшение зависимостей — это всегда хорошо. Особенно когда у некоторых пользователей может быть отключен JavaScript, лучше не полагаться на него без необходимости. Принцип прогрессивного улучшения означает, что каждый может получить доступ к основной функциональности, а дополнительные возможности доступны тем, кто может их увидеть.
JavaScript может быть недоступен по многим причинам: брандмауэры, сетевые ошибки, настройки браузера, ошибки в скриптах. CSS тоже может быть недоступен, но это случается гораздо реже.
Главный недостаток этой техники — работа по ее настройке, особенно с длинными словами или большим их количеством. Впрочем, вычисления не слишком сложные, и их легко можно автоматизировать.
Другая проблема в том, что простое изменение — например, добавление или удаление буквы для исправления опечатки — потребует пересчета всего набора ключевых кадров. Опять же, автоматическая генерация ключевых кадров из набора входных слов решила бы эту проблему.
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Премиум подписка - это доступ к эксклюзивным материалам, чтение канала без рекламы, возможность предлагать темы для статей и даже заказывать индивидуальные обзоры/исследования по своим запросам!Подробнее о том, какие преимущества вы получите с премиум подпиской, можно узнать здесь
Также подписывайтесь на нас в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru