CSS анимация при прокрутке страницы
На этом уроке, мы делали анимацию элементов, используя библиотеку animate.css. CSS анимация отрабатывала сразу, после загрузки страницы и останавливалась, что является большим недостатком, если страница длинная.
Демо-пример с animate.css
Покручивая длинный лендинг, пользователь просто не успевает увидеть анимацию всех секций, ведь библиотека animate.css уже быстренько отработала. Что же делать? Как заставить анимацию продолжать работать при прокрутке страницы, реагируя на новые секции с элементами.
Как гласит народная мудрость, если мало одной библиотеки, то добавь ещё одну.
Подключение плагина wow.js
Нужно сделать так, чтобы анимация срабатывала только тогда, когда мы прокручиваем страницу. Для этого и существует плагин wow.js, для работы которого не нужен jQuery. Обратите внимание, что файл animate.css, тоже должен быть подключен и классы у тегов прописаны, об этом было сказано в начале статьи.
Независимо от способа подключения, прописываем ссылку на JS файл перед закрывающим тегом body, в теге script. Запускает плагин функция - new WOW().init()
Подключение через CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
Подключение через скачивание архива
Скачиваете архив с github и перекладываете файл wow.min.js из скачанной архивной папки dist папку js с вашим проектом.
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
Чтобы анимация на сайте сработала, необходимо добавить к тегам элементов, которые собираетесь анимировать - класс wow, вместо класса animated. Замена классов касается тех, кто на сайте использовал только одну библиотеку animate.css, но решил добавить ещё плагин wow.js. Если вы сразу установили оба файла, то просто прописываете wow и название анимации.
<div id="item" class="animated pulse">
<div id="item" class="wow pulse">
Теперь анимация запускается при прокрутке страницы, по ходу движения вниз, по мере появления новых элементов на странице.
Дополнительные опции
Теперь давайте рассмотрим дополнительные опции, которые можно использовать в наших анимациях. Для этого посмотрим, что есть в документации, из четырех опций я реально использую только две. Остальные на мой взгляд бесполезные и даже вредные.
Атрибут data-wow-duration задает продолжительность анимации в секундах, иногда необходимо замедлить анимацию, сделать её более плавной. Атрибут data-wow-offset устанавливает на каком расстояние от нижнего края браузера, следует запустить анимацию.
Допустим, вы хотите, чтобы анимация длилась 1 секунду. Добавляете к классу тега соответствующий параметр.
<h1 class="wow fadeInDown" data-wow-duration="1s">How it works</h1>
Демо-пример с animate.css+wow.js
Где на практике лучше всего применять комбинацию animate.css + wow.js? Там, где вы активно продвигаете товар или услугу, такая подача информации привлечет больше клиентов. Самый главный потребитель анимаций при прокручивании страницы – это лендинг. Есть одно но, прежде чем повесить на него анимацию, надо сперва научиться профессионально создавать лендинги, хотя бы из этого видеокурса "Создание и продвижение лендинга под ключ".Обратите внимание, как привлекательно анимирована сама продающая страница видео-курса.
-
Создано 14.09.2018 10:53:32
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.