Как запретить включать анимацию wow.js при скролле вверх?

Question

[make_dev]

Добрый день!
Я использую связку animate.css+wow.js. И есть такая проблема - если перезагрузить страницу в проскролленом состоянии, например, до середины, то после перезагрузки при скролле вверх wow.js также срабатывает.
Мне нужно сделать так, чтобы в проскролленой станице wow.js срабатывал только при скролле вниз, а при скролле вверх не срабатывал и все элементы были уже загружены без анимации.
Как это можно сделать? В документации Wow не нашла данной фичи.

Или посоветуйте библиотеки, аналогичные Wow.js, в которых есть такая функция.

Answer 1

[Михаил Горячкин]

Ну самый примитивный вариант выглядит так:
Создаете у себя там класс в css:

.visible {
  visibility: visible !important;
}

Потом дописываем убогий js, после вызова wow.init(), что-то типо того:

var scroll = window.pageYOffset, array = [];
wow.boxes.forEach(function (box) {
    let pos = $(box).position(), height = $(box).height();
    if (pos.top + height < scroll) {
        $(box).addClass("visible");
    } else {
        array.push(box);
    }
});
wow.boxes = array;

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

Comments

[make_dev]

Спасибо! Поищу еще библиотеки, где реализован данный функционал. Если не найду, то воспользуюсь Вашим решением.

[Михаил Горячкин]

Удачи)

Answer 2

[Дмитрий Христоев]

https://www.youtube.com/watch?v=zrGgSDVzpQI&index=...