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

HTML
19.09.2018
TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

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

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

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

Обнаружились проблемы – для того чтобы анимация работала при прокрутке и вниз, и вверх необходимо подключать:

  • 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

И обязательно отключать анимацию для мобильных, иначе пользователи некоторых мобильных устройств не смогут увидеть весь контент вашего сайта:

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

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Полезная инфа:

Оставить комментарий