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

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

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

На старт

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

<blockquote>
 <q>What we think, we become.</q>
 <cite>Gautama Buddha</cite>
</blockquote>

Внимание

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

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:

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 применятся только первые стили.

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

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

Узнать подробнее
blockquote q span { 
  will-change: opacity, filter;
  opacity: 0;
  filter: blur(0px);
}

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

Марш

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

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+"</span>";
 if (i < quotewords.length - 1) {
 quote.innerHTML += " ";
 }
  }
  quotewords = document.querySelectorAll("blockquote q span");
  fadeWords(quotewords);
}

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

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

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

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

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 в конце скрипта:

splitWords();

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

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

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree