Как сделать блоки анимированными с помощью wow.js

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

Как подключить wow.js:

1. Подключаем библиотеку jQuery. Пропишите перед закрывающим тегом </body>
<script type="text/jаvascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3. Подключаем стили простым HTML кодом на странице в теге <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
А также библиотеку wow.js закрывающим тегом </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

4. Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:
<script>
   new WOW().init();
</script>

5. Чтобы анимировать элемент, ему надо задать класс wow, а также класс отвечающий за тип анимации. Например анимируем картинку.
<img class="wow zoomInUp" src="images/image.jpg" alt="" />
Типы анимаций можно посмотреть тут https://daneden.github.io/animate.css/
Так же можно задать дополнительные настройки для анимации при помощи data атрибутов
<img class="wow zoomInUp" data-wow-offset="200" data-wow-delay="0.5s" data-wow-duration="2s" src="images/image.jpg" alt="" />

Основные data атрибуты:
data-wow-duration: - изменение продолжительности анимации
data-wow-delay: - задержка перед запуском анимации
data-wow-offset: - включение анимации, когда элемент проходит определнное количество пикселей от низа экрана
data-wow-iteration: - количество повторений анимации

Расширенные настройки:

boxClass: Название класса для определения анимации
animateClass: Название класса, которое запускает анимацию CSS («animated» по умолчанию для библиотеки animate.css)
offset: Определяет расстояние между нижней частью окна просмотра браузера и верхней частью скрытого окна.
mobile: включение / выключение wow.js на мобильных устройствах.
live: постоянно проверяет новые элементы WOW на странице.
wow = new WOW(
    {
        boxClass:     'wow',      // Стандартное значение
        animateClass: 'animated', // Стандартное значение
        offset:       0,          // Стандартное значение
        mobile:       true,       // Стандартное значение
        live:         true        // Стандартное значение
    }
)
wow.init();
Добавить комментарий

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

Кликните на изображение чтобы обновить код, если он неразборчив