Популярное использование анимации в Интернете — это добавление движения к элементам при прокрутке браузера. В этой главе мы рассмотрим, как это сделать.
Вот демонстрация на CodePen. Попробуйте прокрутить страницу вниз и посмотрите, как цитаты и котики появляются на своих местах.
Wow.js
Многие сайты запускают пользовательскую анимацию, когда вы прокручиваете страницу до определённого момента. Они могут воспроизводить видео, запускать сложную анимацию с ключевыми кадрами или просто заставлять элементы появляться для привлечения к ним внимания.
В каждом случае происходит так: есть некий JavaScript, который добавляет класс к элементу, когда он виден на экране. Затем мы можем привязать анимацию к этому классу, чтобы при прокрутке браузера анимация начиналась в нужное время.
Существует несколько способов добавления классов через JavaScript, один из них, который мне показался удобным в использовании, — библиотека Wow.js. Давайте воспользуемся ей для создания простого примера, в котором содержимое появляется по мере прокрутки.
Использование Wow.js
Использование Wow.js включает в себя два шага. Первый шаг — скачать JavaScript-файл. Поместите файл wow.min.js в папку JavaScript вашего проекта. Следующим шагом будет ссылка на этот файл из HTML:
<script src="javascripts/wow.min.js"></script>.
Предполагается, что ваша папка называется javascripts — измените её при необходимости.
Затем вызываем JavaScript с помощью этой команды (вставьте её после предыдущего кода):
<script>
new WOW().init();
</script>
Теперь мы можем добавить классы .wow к нашему содержимому, а Wow.js будет проверять, находится ли это содержимое на экране.
Добавление классов .wow
Если у нас есть элемент, который мы хотим анимировать при прокрутке, убедитесь, что у него есть класс .wow:
<p class="wow">...</p>
Это означает, что когда браузер прокрутит данный абзац на экране, Wow.js добавит к к нему класс .animated, как показано ниже:
<p class="wow animated">...</p>
Если бы у нас была анимация для элементов p.animated, то она происходила бы только при добавлении этого класса.
Скрытие и отображение
В нашей демонстрации мы скроем все элементы с классом .wow и покажем их, если они имеют класс .animated. Сначала мы их скроем:
.wow {
opacity: 0;
transition: all 0.5s 0.5s ease-out;
}
Здесь мы также применяем transition, чтобы элемент появлялся плавно. Обратите внимание на второй параметр 0.5s. В данном случае мы добавляем задержку в полсекунды. Это даёт элементу шанс успеть прокрутиться в области просмотра, прежде чем он появится.
Следующий код определяет, как будет выглядеть элемент с добавленным классом animated:
.animated {
opacity: 1;
}
Теперь у нас должна сложиться ситуация, когда элементы будут появляться по мере прокрутки пользователем! Посмотрите это в действии на демонстрационном примере.
Использование Animate.css
Wow.js был разработан для совместной работы с CSS-фреймворком Animate.css. Я ещё не использовал его в примере, так как он помогает понять, как создавать собственные переходы. Возможно, стоит взглянуть на некоторые переходы, которые Animate.css предоставляет нам «из коробки».
В этом примере я использовал Animate.css. Обратите внимание, что в CSS нет ни анимации, ни переходов. Вместо этого я добавил класс в HTML, чтобы указать Animate.css, какую анимацию применять:
<section class="image wow bounceInUp">
Класс .bounceInUp — это указатель на одну из многочисленных встроенных анимаций Animate.css. Если вы выберете «шестерёнку» в секции CSS, то увидите, что я ссылаюсь на фреймворк Animate.css в разделе «External CSS file».
Использование Modernizr
Я считаю, что в целом хорошей идеей будет защититься от ситуаций, когда мы скрываем содержимое и показываем его снова с помощью JavaScript. По тем или иным причинам JavaScript у людей может быть отключен или не работать. Для проверки подобной ситуации можно использовать такую библиотеку как Modernizr. Она добавит класс js к элементу <body> и мы сможем использовать его в наших стилях.
Я включил Modernizr в демонстрационный пример.
Домашнее задание
Плавно появляющееся на своём месте содержимое — отличная идея, но добавляет ли она ценности вашему дизайну и сайту? Просматривая сайты, обратите внимание на моменты, когда содержимое начинает анимироваться при прокрутке.
Когда это работает, а когда не очень?