Обратная связь

Анимация элементов при прокрутке - WOW.js

Просмотров: 462

На чтение:

Анимация элементов при прокрутке - WOW.js

Скрипт wow.js реализует на сайте анимацию появления блоков при прокрутке страницы вниз. Скрипт использует библиотеку animate.css и не требует никаких библиотек на javascript

Установка wow.js

Для начала необходимо скачать скрипт:

Скачать wow.js

Нажмите правой кнопкой мышки на кнопку и выберите "Сохранить ссылку как"

Далее перекиньте его в папку с вашим сайтом через FTP и в шапке сайта пропишите:

 

<script src="/путь до файла/wow.min.js"></script>

Далее вам необходимо скачать animate.css

Скачать Animate.css

Нажмите правой кнопкой мышки на кнопку и выберите "Сохранить ссылку как"

Далее перекиньте его в папку с вашим сайтом через FTP и в шапке сайта пропишите:

 

<link rel="stylesheet" href="/путь до файла/animate.min.css" />

В коде страницы (можно где-нибудь внизу) вставьте следующий код:

 

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

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

На этом установка завершена!


Примеры

Настройки анимации и появления

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>

Параметры WOW

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

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

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

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

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

По умолчанию скрипт имеет следующие параметры:

 

wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
})
wow.init();

На этом собственно все. Сегодня вы научились делать эффектные анимации при скроле. И само собой, этот эффект придаст вашему сайту более приятный внешний вид.


Опубликовано: 30.09.2022

Рейтинг: 5/5 - 2 голосов

Комментарии ()

    Другие статьи

    Почему Modx revo? Преимущества системы перед другими CMS

    В этой статье я попытаюсь объяснить почему в свое время я бросил удобный и несложный Wordpress и "пересел"…

    Рейтинг: 4.3/5 - 4 голосов

    Как клонировать вордпресс при режиме мультисайта?

    Добрый день мои маленькие любители сайтостроительства. На связи Арсен Амбарцумян и сегодня я расскажу…

    Рейтинг: 5/5 - 3 голосов

    Как редактировать страницы в Modx Revo из фронтенда (Не заходя в админку)

    Добрый день Господа разработчики. На связи Арсен Амбарцумян, ваш учитель по старту разработки на системе…

    Рейтинг: 4.7/5 - 3 голосов

    Collaborator.pro ввел санкции против россиян? Мое мнение.

    Недавно на почту пришло письмо от Collaborator.pro. Мол, дескать, пользователям из России мы закрываем…

    Рейтинг: 4.7/5 - 3 голосов

    Katarina (06 мая 2024, 19:35):
    Очень красиво и солнечно!

    Катерина (06 февраля 2024, 14:53):
    там рядом еще горнолыжный комплекс

    Вероника (16 июля 2022, 22:12):
    Москва самый волшебный город. И ночи тут особенные

    MeandI (16 июля 2022, 17:33):
    Тоже с недавних пор перешел на модекс. Скажу откровенно временами трудно, и сам по себе сайт тут строится иначе, чем на любой другой cms. Но система гибкая…

    Кристина (06 июня 2022, 11:16):
    Безумно красиво! Отдает зимним волшебством!

    © 2022 Arsenit.ru - Блог бывшего сео специалиста | Д.Р. блога 23.03.2022