Отключение анимации WOW.js, когда элемент расположен перед текущей позицией прокрутки

Я уже некоторое время использую WOW.js для анимации своих элементов. Я заметил, что, когда посетитель страницы перезагружает страницу, анимация, которая уже была «прокручена для просмотра» браузером, запомнившим позицию прокрутки, будет выполняться при прокрутке вверх. Это не мое желаемое поведение, поскольку мы можем предположить, что посетитель уже видел все анимации.

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

$(function () {
    function isScrolledAlready(elem) {
        var docViewTop = $(window).scrollTop();
        var elemTop = $(elem).offset().top;

        return (elemTop >= docViewTop);
    }

    $('.wow').each(function () {
        if (!isScrolledAlready(this)) {
            $(this).removeClass('wow');
        }
    });

    new WOW().init();
}

Пример

Элементы выше $(window).scrollTop() больше не должны выполнять анимацию WOW.js.

<div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">...</div>
<div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">...</div>
<div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">...</div>

// scrollTop is here, animations above here should no longer execute on a reload of the page

<div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">...</div>
<div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">...</div>
<div class="wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">...</div>

Мне было интересно, может быть, есть более дружественный к производительности способ решения этой проблемы. Для страниц с несколькими анимациями это нормально, но можно представить, что страница с большим количеством .wowможет стать проблематичным.

0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *