Анимация элементов при скроле
Анимируем элементы на странице при прокрутке.
В данном примере рассмотрим плавное появление элементов при скроле страницы, а так же плавное затухание элементов когда элемент уже проскролен при прокрутке страницы вверх.
Данные скрипты выполняют аналогичные функции как и 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
CSS правило @keyframes Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и…
Самый простой скролл вверх страницы HTML JS
UPD — код для анимации обновлен, из-за обновления структуры Animate.css Используем библиотеку WOW.js документация здесь….
Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения…
5 комментариев
Ответить
А как на счет AOS js? active-vision.ru/blog/animatsiya-pri-prokrutke/ Я думаю поинтересней библиотека будет
По-моему, ничем не отличается от WOW.js https://denis-creative.com/animatsiya-elementov-v-html-s-pomoshhyu-css-i-js/
Спасибо, то что нужно)
Спасибо за ещё один подробный урок!
В файле к описанию не открывается animate-css.js (обновленный). А в активной ссылке не работает анимация после дальнейшей прокрутке.
Подскажите, пожалуйста, можно ли где-то скачать animate-css.js для появление элемента при прокрутке страницы вниз и исчезания элемента, когда страница прокручивается вверх?
Я посмотрю на старых проектах.
Но я отказался от этого плагина, так как слишком много в нем нюансов и лишних скриптов.
Вместо него использую WOW.js