От автора: недавно мне показали несколько примеров эффекта плавного появления слов. Похожий визуальный эффект можно увидеть в фэнтези и приключенческих фильмах. Все способы, которые я видел, требуют много разметки и больших фреймворков, но тут я понял, что эффект можно с легкостью воссоздать с помощью JavaScript и Web Animation API.
На старт
Демонстрация конечного эффекта. Начнем мы с разметки: если JS не сработает по каким-либо причинам, пользователь хотя бы сможет прочитать текст (будем создавать эффект по методике прогрессивного улучшения). Для этого я возьму теги blockquote, q и cite:
|
1 2 3 4 |
<blockquote> <q>What we think, we become.</q> <cite>Gautama Buddha</cite> </blockquote> |
Внимание
Базовые настройки шрифта указываем в CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
blockquote { font-size: 3rem; } cite { display: block; text-align: right; font-family: Verdana, Arial, sans-serif; margin-top: 1rem; font-size: .9rem; color: #aaa; font-style: normal; } blockquote q { font-family: Georgia, serif; font-style: italic; letter-spacing: .1rem; } |
Чем хорош тег <q> — открывающие и закрывающие кавычки можно кастомизировать через CSS. Отрисовывая их в виде псевдоэлементов, мы убираем их из HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
q { quotes: "“" "”" "‘" "’"; } q:before { content: open-quote; margin-right: .8rem; } q:after { content: close-quote; } q:before, q:after { color: #ccc; font-size: 4rem; } |
JS код, который мы сейчас добавим, будет оборачивать все слова в тег span. CSS ниже будет применяться к этим элементам только в том случае, если работает JS. Если JS не работает, к HTML применятся только первые стили.
|
1 2 3 4 5 |
blockquote q span { will-change: opacity, filter; opacity: 0; filter: blur(0px); } |
Свойство will-change – предупреждение рендеринг движку браузера, что определенные свойства (opacity и blur) будут анимированы. Данное свойство подготавливает браузер и оптимизирует анимацию.
Марш
Скрипт, который мы добавим в конец страницы, делится на три функции: генератор случайных чисел, функцию, которая разбивает контент цитаты на отдельные слова и окружает их в тег span, а также сама анимация. Начну со второй функции:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function splitWords() { let quote = document.querySelector("blockquote q"), quotewords = quote.innerText.split(" "), wordCount = quotewords.length; quote.innerHTML = ""; for (let i=0; i < wordCount; i++) { quote.innerHTML += "<span>"+quotewords[i]+"</span>"; if (i < quotewords.length - 1) { quote.innerHTML += " "; } } quotewords = document.querySelectorAll("blockquote q span"); fadeWords(quotewords); } |
Из необычного здесь есть проверка переменной i на количество слов в цитате. Каждое слово в цитате получает дополнительный пробел справа кроме последнего.
Массив слов передается в функцию fadeWords, которая использует следующую функцию:
|
1 2 3 |
function getRandom(min, max) { return Math.random() * (max - min) + min; } |
Сама функция fadeWords:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function fadeWords(quotewords) { Array.prototype.forEach.call(quotewords, function(word) { let animate = word.animate([{ opacity: 0, filter: "blur("+getRandom(2,5)+"px)" }, { opacity: 1, filter: "blur(0px)" }], { duration: 1000, delay: getRandom(500,3300), fill: "forwards" } ) }) } |
Все теги span меняют значения opacity с 0 до 1, размытие постепенно уменьшается. Анимация длится одну секунду, но у каждого элемента случайная задержка, т.е. слова начнут плавно появляться в разное время (или, по крайней мере, должны).
Все начинается с вызова функции splitWords в конце скрипта:
|
1 |
splitWords(); |
Можно улучшить этот метод: можно последовательно плавно показывать слова (увеличивая по инкременту задержку каждого слова). Также можно избирательно показывать слова (для этого необходимо добавлять теги span с разными классами определенным словам, а скрипт должен случайно выбирать эти слова). Остальное отдам на откуп вашему воображению…
Источник: //thenewcode.com/
Редакция: Команда webformyself.
