10 потрясающих фрагментов кода CSS и JavaScript с анимированным текстом

Вы можете создать довольно ослепительные текстовые эффекты с помощью базового CSS и нескольких строк JavaScript. Эти эффекты варьируются от анимации отображения текста до трехмерных вращений или всего, что вы можете себе представить.

И в этом посте я каталогизировал 10 самых крутых примеров со всего Интернета, демонстрирующих, что вы можете сделать с помощью небольшого количества стилизованного текста и кода CSS.

Вам также могут понравиться эти инструменты CSS-анимации.

1. Анимация заголовка

Этот эффект анимированного заголовка от Робина Треура соответствует стилю многих фильмов или видеоигр. Буквы приобретают выпуклый 3D-эффект с использованием текстовых теней CSS3 и небольшого наклона по диагонали.

Стиль плавной анимации напоминает мне классические фильмы 1930-х годов с таким же наклонным текстом. Все управляется через CSS, но кнопка «перезагрузка» построена с использованием JavaScript. Таким образом, вы можете проиграть анимацию много раз, чтобы лучше ее рассмотреть.

2. Разрушение

Создание разбитого разбивающегося текста — простая задача с такими инструментами, как After Effects, но создание анимации разбивки текста с помощью кода — намного сложнее, что делает эту ручку Арсена Збиднякова весьма впечатляющей.

Текст на самом деле построен с использованием форм SVG, что немного упрощает процесс анимации. Это также означает, что вы не можете выбирать, копировать или взаимодействовать с текстом, как обычно.

Но вы можете добавить аналогичный эффект на свой сайт, если используете его для логотипа или другого неинтерактивного элемента страницы.

3. Скрученные буквы

Разработчик Мамун Хандакер собрал эту коллекцию анимаций с скрученными буквами. Каждый стиль анимации имеет свое имя, и вы можете просмотреть их все в одном ручке.

Я мог видеть эти текстовые эффекты, используемые на целевых страницах или домашних страницах для инструмента/веб-приложения. Они сразу привлекают внимание и оставляют неизгладимое впечатление на посетителя. Кроме того, все они сделаны с использованием 100% чистого CSS и очень просты в настройке.

4. Пиксельный алфавит

Этот уникальный анимированный пиксельный эффект определенно странный, но странно завораживающий. Он в основном основан на JavaScript и был создан разработчиком Георгием Николоффом как способ поиграть с элементом холста HTML5.

Он использует Noto Serif в качестве основы шрифта и преобразует буквы в податливые элементы внутри элемента холста. JavaScript разбивает буквы на более мелкие точки, которые составляют основу анимации.

Я не могу сказать, что это будет иметь большое практическое значение, но это свидетельство того, как далеко продвинулась веб-анимация.

5. Карусель ввода

Этот эффект широко известен в небольших портфолио и на веб-сайтах агентств. Анимация ввода текста часто появляется в заголовке сайта и имитирует вид человека, печатающего текст в текстовом процессоре.

Все содержится в одном элементе с хорошим сочетанием анимации CSS и JavaScript. Иногда вы увидите, что веб-сайты используют это для перечисления описаний своей работы, своей истории или клиентов, с которыми они работали.

Это определенно забавный эффект при умеренном использовании. Поскольку одновременно видно только одно слово, это ограничивает читабельность страницы, но при умеренном использовании это очень крутой эффект, который может скопировать любой.

6. Тайгер Тайгер

Заимствуя слова из стихотворения Уильяма Блейка «Тигр», эта уникальная анимация Джозефа Мартуччи действительно привлекает ваше внимание.

Здесь акцент делается не столько на содержании, сколько на типографских стилях и анимации. Каждый «сегмент» текста имеет свой стиль с контурами текста и светящимися эффектами. Это отличный пример того, как вы можете стилизовать домашнюю страницу для последовательной анимации текста с помощью setTimeout() .

7. Привязать SVG

Библиотека Snap.svg с открытым исходным кодом позволяет любому создавать изображения SVG высокого разрешения с помощью небольшого количества кода. Это намного проще, чем изучение такой программы, как Illustrator, и она позволяет вам анимировать так же, как этот забавный пример, созданный Алексис Блондин.

Все буквы создаются динамически с помощью JavaScript, включая случайные символы, используемые в анимации. Современная поддержка SVG огромна, и эти типы изображений могут радикально изменить то, как мы создаем веб-сайты в ближайшие годы. Эта анимация Snap.svg — всего лишь один пример, и она определенно классная.

8. Анимация брекетинга

Вот еще одна довольно распространенная техника текстовой анимации, которую я вижу постоянно. Он использует скобки с вращающимся текстом почти как ролодекс на странице.

Эта анимация имитирует эффект карусели при наборе текста, о котором я упоминал ранее, за исключением того, что это можно сделать только с помощью CSS. Он основан на настраиваемой зацикленной анимации, которая перемещается от одного ключевого кадра CSS к другому, при этом каждый кадр отображает другое слово или фразу во вращающемся тексте.

Я считаю, что этот эффект гораздо тоньше и легче читается на домашней странице. Если вы ищете классные текстовые эффекты для своей домашней страницы, это будет отличным выбором.

9. Несгибаемая Кимми Шмидт

Этот милый эффект логотипа был позаимствован из сериала Netflix «Несгибаемая Кимми Шмидт». Все создается с помощью CSS, включая стили текста и пользовательские анимации.

В теле страницы есть класс, который инициирует анимацию, и этот класс добавляется к странице с помощью JavaScript. Оттуда это все чистый CSS. Он в основном использует множество преобразований для создания удивительно реалистичного эффекта подпрыгивания.

Это еще один пример того, как много может сделать CSS3, если вы знаете, как его использовать.

10. Заполнение текста SVG

Наконец, мы подошли к этой очень уникальной SVG-анимации-заполнителю, использующей сочетание теней блока и свойства обводки CSS.

Этот текст полностью построен с помощью SVG, но его также можно выделить, поэтому вы можете копировать/вставлять буквы, как обычный текст. Он полностью совместим со всеми браузерами, а анимация достаточно тонкая, чтобы ее можно было разместить на любом веб-сайте.

Все эти текстовые анимации привносят что-то новое. Возможно, вы не найдете их все практичными или применимыми в своей работе, но они доказывают, что почти все возможно при правильном подходе.