Добавление анимации появления блоков для сайта

Установка:

Добавляем на сайт стили animate.css и скрипт WOW.js:

• Скачать: animate.min.css

• Скачать: wow.js или wow.min.js

И подключаем скрипт:

<script>

new WOW().init();

</script>

Пример:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script type="text/javascript" src="https://ozonbanner.ru/upload/wow.min.js"></script>
<script>
new WOW().init();
</script>

Добавление эффектов к элементам:

<div class="wow bounceInUp">

 Анимируемый контент

</div>

Класс wow сделает элемент невидимым пока до него не дойдет прокрутка, а класс bounceInUp добавит эффект появления. Посмотреть все эффекты можно на странице библиотеки animate.css

Подключаем анимацию с помощью WOW.js

1. Подключаем библиотеку анимаций Animate.css
(можно подключить любую другую библиотеку для анимации, и указать ее в опциях WOW.js)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

2. Подключаем и активируем WOW.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<script>

    new WOW().init();

</script>

Анимируем элементы на странице

Добавляем элементу класс .wow — элемент будет невидимым, пока пользователь не проскролит страницу до него (в настройках WOW.js можно изменить имя класса, чтобы избежать конфликтов).

<div class="wow">

  Content to Reveal Here

</div>

UPD Для того, чтобы не было мигания элементов на первом экране, которое происходит, когда сайт большой и скрипты прогружаются на доли секунды позже HTML, то есть анимация подключается после того, как уже отобразилась страница, и сначала скрывает элемент а потом его анимирует, то нужно для анимируемых элементов задать правило visibility: hidden;

Можно задать его для отдельных классов или сразу для всех анимируемых элементов, которые имеют общий класс .wow:

.wow {

    visibility: hidden;

}

Выберите стиль анимации в Animate.css, затем добавьте класс CSS в анимируемый элемент HTML

<div class="wow animate__animated animate__fadeInUp">

  Content to Reveal Here

</div>

В версии 3.7.0 Animate.css достаточно было добавить класс с названием анимации, например fadeInUp, то начиная с версии 4.0.0 необходимо указывать animate__animated animate__fadeInUp или можно только название анимации animate__fadeInUp, но тогда в параметрах скрипта обязательно нужно изменить дефолтный класс анимации animateClass: 'animated' на 'animate__animated'.

Доступные опции

data-wow-duration: Изменение продолжительности анимации
data-wow-delay: Задержка перед запуском анимации
data-wow-offset: Расстояние до начала анимации (связанное с нижней частью браузера)
data-wow-iteration: Количество повторений анимации

<section class="wow animate__animated animate__slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>

<section class="wow animate__animated animate__slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

UPD параметры анимации не обязательно добавлять в HTML, их можно прописать в CSS для анимируемых элементов, например:

.item-animated {

    animation-duration: 2s;

    animation-delay: 5s;

    animation-iteration-count: 10;

}

Например, такие правила, чтобы анимируемые элементы в одном ряду плавно появились друг за другом, а не одной пачкой:

.item:first-child {

    animation-delay: 0.1s;

}

.item:nth-child(2) {

    animation-delay: 0.2s;

}

.item:nth-child(3) {

    animation-delay: 0.3s;

}

Настройка параметров

boxClass: Имя класса, которое показывает скрытый блок при прокрутке страницы пользователем.
animateClass: Имя класса, которое запускает анимацию CSS (animated по умолчанию для библиотеки animate.css версии 3.0 и animate__animated по умолчанию для библиотеки animate.css версии 4.0+)
offset: Расстояние между нижней частью окна просмотра браузера и верхней частью скрытого окна. Когда пользователь прокручивает страницу и достигает этого расстояния, открывается появляется анимированный блок.
mobile: Включение/Отключение WOW.js для мобильных устройств (лично я рекомендую всегда отключать анимацию для мобильных).
live: следить за новыми элементами WOW на странице.

wow = new WOW({

    boxClass:     'wow',      // default

    animateClass: 'animated', // default

    offset:       0,          // default

    mobile:       true,       // default

    live:         true        // default

});

wow.init();

Для animate.css версии 4.0+ animateClass должен быть animate__animated:

animateClass: animate__animated;

=============

Дополнительные настройки:

data-wow-duration: Продолжительность анимации

data-wow-delay: Задержка перед запуском анимации

data-wow-offset: Расстояние от нижнего края браузера для запуска анимации

data-wow-iteration: Количество повторов анимации

Пример:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">

 Контент

</section>

<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">

 Контент

</section>

Настройка параметров:

boxClass: Имя класса, которое показывает скрытое поле при прокрутке.

animateClass: Имя класса, который запускает CSS анимацию

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

mobile: Включает и выключает WOW.js на мобильных устройствах.

live: Действие с асинхронно загруженным содержимым.

По умолчанию:

wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true

})

wow.init();

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