Создаем эффект плавного появления слов с помощью 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. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

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

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

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

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