Создаем эффект плавного появления слов с помощью Web Animation API

Создаем эффект плавного появления слов с помощью Web Animation API

От автора: недавно мне показали несколько примеров эффекта плавного появления слов. Похожий визуальный эффект можно увидеть в фэнтези и приключенческих фильмах. Все способы, которые я видел, требуют много разметки и больших фреймворков, но тут я понял, что эффект можно с легкостью воссоздать с помощью JavaScript и Web Animation API.

На старт

Демонстрация конечного эффекта. Начнем мы с разметки: если JS не сработает по каким-либо причинам, пользователь хотя бы сможет прочитать текст (будем создавать эффект по методике прогрессивного улучшения). Для этого я возьму теги blockquote, q и cite:

Внимание

Базовые настройки шрифта указываем в CSS:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Чем хорош тег <q> — открывающие и закрывающие кавычки можно кастомизировать через CSS. Отрисовывая их в виде псевдоэлементов, мы убираем их из HTML:

JS код, который мы сейчас добавим, будет оборачивать все слова в тег span. CSS ниже будет применяться к этим элементам только в том случае, если работает JS. Если JS не работает, к HTML применятся только первые стили.

Свойство will-change – предупреждение рендеринг движку браузера, что определенные свойства (opacity и blur) будут анимированы. Данное свойство подготавливает браузер и оптимизирует анимацию.

Марш

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Из необычного здесь есть проверка переменной i на количество слов в цитате. Каждое слово в цитате получает дополнительный пробел справа кроме последнего.

Массив слов передается в функцию fadeWords, которая использует следующую функцию:

Сама функция fadeWords:

Все теги span меняют значения opacity с 0 до 1, размытие постепенно уменьшается. Анимация длится одну секунду, но у каждого элемента случайная задержка, т.е. слова начнут плавно появляться в разное время (или, по крайней мере, должны).

Все начинается с вызова функции splitWords в конце скрипта:

Можно улучшить этот метод: можно последовательно плавно показывать слова (увеличивая по инкременту задержку каждого слова). Также можно избирательно показывать слова (для этого необходимо добавлять теги span с разными классами определенным словам, а скрипт должен случайно выбирать эти слова). Остальное отдам на откуп вашему воображению…

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree