Установка:
Добавляем на сайт стили animate.css и скрипт WOW.js:
- Скачать: animate.min.css
- Скачать: wow.js или wow.min.js
И подключаем скрипт:
|
1 2 3 |
<script> new WOW().init(); </script> |
Добавление эффектов к элементам:
|
1 2 3 |
<div class="wow bounceInUp"> Анимируемый контент </div> |
Класс wow сделает элемент невидимым пока до него не дойдет прокрутка, а класс bounceInUp добавит эффект появления. Посмотреть все эффекты можно на странице библиотеки animate.css
Примеры:
Дополнительные настройки:
data-wow-duration: Продолжительность анимации
data-wow-delay: Задержка перед запуском анимации
data-wow-offset: Расстояние от нижнего края браузера для запуска анимации
data-wow-iteration: Количество повторов анимации
Пример:
|
1 2 3 4 5 6 7 |
<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: Действие с асинхронно загруженным содержимым.
По умолчанию:
|
1 2 3 4 5 6 7 8 |
wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }) wow.init(); |
WOW.js на сайте wowjs.uk
Здравствуфте, а как убить wow?
Смысл : открывается в popup блок, там проигрывается видео youtube.
Если на странице применяются какие-то классы wow, то видео тормозит.
Как только класс wow удаляется, все работает.
Есть ли у объекта wow такой же метод, который его удалит?
Если естть wow.init(), то, по логике, должен быть wow.destroy()....
чтобы можно было не переписывать классы всех элементов через js, а просто выключить анимацию, а затем, когда из диалогового окна обратно возвращаемся - вновь включить, создав новый объект класса...
Спасибо!
wow.destroy() у него вроде нет.
А почему не переписать классы? на jquery всего пара строчек, чтобы убрать и вернуть.
Меняем все wow на wow2 и назад потом.
Спасибо за ответ!
Да вот бьюсь уже неделю ( отложу, подумаю), вновь начну...
смысл в следующем.
1. Мы ручками добавляем класс wow и затем - класс анимации, например : animate__fadeInUp
2. При загрузке страницы скрипт вписывает в блок класса wow строчку style='animation-name:fadeInUp'
Получается, что смена класса после загрузки страницы на wow2 ничего не даст.
Анимация уже прописана. Удалять style у меня не получается через javascript, она всё равно каким-то волшебным образом появляется вновь при прокрутке страницы.
Я пробовал и заменить wow2 и удалить style='animanion...' но этот чудный скрипт всё равно вписывает в блок style='animation'
Единственное средство - это не инициировать класс wow.init()...Вот я и пытался найти решение, обычно в ООП есть destroy метод класса ( раз есть его создатель).
А проблема в том, что при создании Диалогового окна с встроенным YouTube видео - данная анимация притормаживает видео. Если анимацию отключать, ролик грузится нормально. Вот я и подумал, что на время просмотра ролика анимцию нужно выключать, а потом - вновь инициировать...
Вдруг вам будет интересно решить такую задачу - это было бы хорошим дополнением статьи!