Анимируем элементы на странице при прокрутке.
В данном примере рассмотрим плавное появление элементов при скроле страницы, а так же плавное затухание элементов когда элемент уже проскролен при прокрутке страницы вверх.
Данные скрипты выполняют аналогичные функции как и wow.js, который рассматривали в этой статье Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js, но имеют более гибкие настройки и более широкий функционал.
Подключаем animate.css – http://daneden.github.io/animate.css/
Подключаем плагин waypoints.min.js – https://github.com/agragregra/start_html/tree/master/_clean_html/libs/waypoints
Подключаем плагин анимации animate-css.js – https://github.com/agragregra/start_html/tree/master/_clean_html/libs/animate
Затем в файле функций JS анимируем нужные элементы, выбирая их по классу:
$(".logo").animated("zoomInUp"); $(".speaker").animated("fadeInUp");
Чтобы для отдельных элементов сделать появление плавнее, например, если они размещены в одном ряду, можно изменить время задержки анимации:
.speaker-1{ animation-delay: .2s; } .speaker-2{ animation-delay: .4s; }
[vc_message color=”alert-info”]Обнаружились проблемы – для того чтобы анимация работала при прокрутке и вниз, и вверх необходимо подключать:[/vc_message]
- jQuery v2 – https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
- jQuery Waypoints v2.0.5 – http://agragregra.github.io/demos/wp-landing-frontend/libs/waypoints/waypoints.min.js
- animate-css.js (обновленный) – http://agragregra.github.io/demos/wp-landing-frontend/libs/animate/animate-css.js
[vc_message color=”alert-info”]И обязательно отключать анимацию для мобильных, иначе пользователи некоторых мобильных устройств не смогут увидеть весь контент вашего сайта:[/vc_message]
CSS
@media (max-width: 768px) { .animated { -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } }
При использовании JS для двойной анимации при скроле и вверх, и вниз нужно писать код в таком формате:
$(".logo").animated("zoomInUp", "zoomInUp"); // для того, чтобы элемент не "моргал" при проскроливании $(".speaker").animated("fadeInUp", "fadeOutDown"); // появление элемента при прокрутке страницы вниз и исчезание элемента, когда страница прокручивается вверх
Источник – https://webdesign-master.ru/blog/html-css/22.html
Комментарии (5) к “Анимация элементов при скроле”
Егор
А как на счет AOS js? active-vision.ru/blog/animatsiya-pri-prokrutke/ Я думаю поинтересней библиотека будет
Denis Creative
По-моему, ничем не отличается от WOW.js https://denis-creative.com/animatsiya-elementov-v-html-s-pomoshhyu-css-i-js/
Sky
Спасибо, то что нужно)
Ольга
Спасибо за ещё один подробный урок!
В файле к описанию не открывается animate-css.js (обновленный). А в активной ссылке не работает анимация после дальнейшей прокрутке.
Подскажите, пожалуйста, можно ли где-то скачать animate-css.js для появление элемента при прокрутке страницы вниз и исчезания элемента, когда страница прокручивается вверх?
Denis Creative
Я посмотрю на старых проектах.
Но я отказался от этого плагина, так как слишком много в нем нюансов и лишних скриптов.
Вместо него использую WOW.js