Анимация элементов при скроле

Анимируем элементы на странице при прокрутке.

В данном примере рассмотрим плавное появление элементов при скроле страницы, а так же плавное затухание элементов когда элемент уже проскролен при прокрутке страницы вверх.

Данные скрипты выполняют аналогичные функции как и 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 анимации

CSS правило @keyframes Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и…

Скролл вверх страницы

Самый простой скролл вверх страницы HTML <div class="scroll-top">scroll</div> JS $(function() { // scroll to top…

Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js

UPD — код для анимации обновлен, из-за обновления структуры Animate.css Используем библиотеку WOW.js документация здесь….

Как убрать желтый (серый) фон при автозаполнении полей формы в браузере Google Chrome

Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения…

5 комментариев

А как на счет AOS js? active-vision.ru/blog/animatsiya-pri-prokrutke/ Я думаю поинтересней библиотека будет

Спасибо, то что нужно)

Ольга

Спасибо за ещё один подробный урок!
В файле к описанию не открывается animate-css.js (обновленный). А в активной ссылке не работает анимация после дальнейшей прокрутке.
Подскажите, пожалуйста, можно ли где-то скачать animate-css.js для появление элемента при прокрутке страницы вниз и исчезания элемента, когда страница прокручивается вверх?

Я посмотрю на старых проектах.
Но я отказался от этого плагина, так как слишком много в нем нюансов и лишних скриптов.
Вместо него использую WOW.js

Ответить