>

Как сделать анимацию элемента при скроллинге без JQuery? Animate.css + WOW.js

13.06.2020
Как сделать анимацию элемента при скроллинге без JQuery? Animate.css + WOW.js

Эту анимацию элемента я часто использую, здесь все просто и легко. Такие анимации дают оживление сайта. Самое главное, что анимация используется без jQuery.

Как сделать анимацию элемента при скролинге?

1. Нужно скачать эти два файла («WOW.min.js» и «Animate.min.css»)

WOW.min.js — https://github.com/matthieua/WOW

Animate.min.css — https://github.com/daneden/animate.css

2. Кидаем файл WOW.min.js в папку js, а Animate.min.css в папку css.

3. Добавляем внутри <head></head> этот код

<link rel="stylesheet" href="css/animate.min.css">

Добавляем в конец перед </body> этот код:

<script src="js/wow.min.js"></script>

<script>
    new WOW().init();
</script>

4. Теперь добавляем два класса на нужный элемент, где:

класс wow — подключение элемента к скрипту;

класс fadeInRight— определенный стиль для анимации элемента.

Очень часто встречается: fadeInRight (Left/Up/Down) и bounceInRight (Left/Up/Down)

Список анимации вы можете посмотреть здесь: Animate.css: Примеры анимаций

<div class="wow fadeInRight">
    Анимация справа налево
</div>

5. Дополнительные настройки. Добавляем атрибуты на тег:

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

data-wow-delay: задержка перед началом анимации;

data-wow-offset: расстояние до запуска анимации;

data-wow-iteration: повторение анимации.

<div class="wow fadeInLeft" data-wow-duration="3.5s" data-wow-delay="1s" data-wow-offset="120">
    Анимация слева направо
</div>

<!-- Вы можете использовать ЛЮБОЙ тег, как пример: -->

<p class="wow fadeInLeft" data-wow-duration="3.5s" data-wow-delay="1s" data-wow-offset="120">
     Анимация слева направо
</p>

Надеюсь, эта статья была полезной) Хорошего дня и отличного настроения!)

Подписаться
Уведомление о
guest
0 Комментарий
Встроенные Обратные Связи
Просмотреть все комментарии