Wow.js происходит при загрузке страницы, а не в прокрутке

Я использую wow.js, и он отлично работает, за исключением того, что анимация происходит сразу после загрузки страницы, а не при прокрутке. Я следовал за документами, но не могу понять.

На странице отсутствуют ошибки JS. Я включил оба animate.min.css и wow.js

в теле:

<img src="images/philosophy.png" alt="Philosophy" id="philosophy-img" class="icon wow bounceInUp">

и в нижнем колонтитуле:

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

Итак, как использовать wow.js, чтобы анимация происходила при прокрутке к определенному div?

Ответ 1

Здесь решение, которое я нашел через закрытый вопрос Github:, вы можете добавить это в свой CSS:

.wow {
   visibility: hidden;
}

Затем WOW переключит его на видимое при запуске анимации.

Ответ 2

Поздний ответ, однако это все равно может помочь другим.

Если WOW.js по-прежнему не работает после добавления последней версии или добавления <!DOCTYPE html>, проблема может быть вызвана конфликтом в прокрутке (или, более конкретно, в окне просмотра).

В моем случае проблема была вызвана в моем CSS при использовании следующего:

html, body {height:100%; width:100%; overflow:hidden}

Удалив высоту и ширину, я смог решить проблему, поскольку Wow.js затем смог заметить , когда элемент попал в область просмотра и изменил видимость элементов.

Ответ 3

Было бы полезно, если бы я знал браузер, который вы используете, и версию WOW.js.

Кроме того, пожалуйста, дайте последнюю версию попробовать, мы внесли некоторые изменения для решения проблем с Firefox, которые также могут решить вашу проблему. В частности, в 0.1.9.

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

Ответ 4

Была такая же проблема. использовал class="wow bounceInUp"

Затем я попробовал class="wow bounceInUp animated"

И он работал

EDIT: в конце концов, это не сработало. Сначала он работал, но затем остановился. Еще большая тайна: S

Ответ 5

Я столкнулся с этой проблемой, и я просто понял это. Дело в том, что <script> в нижнем колонтитуле неполно, или, по крайней мере, это не сработало для меня.

Тот, кто получил эту проблему, попробует этот код вместо этого перед тегом </body>:

<script>
wow = new WOW( {
    boxClass:     'wow',
    animateClass: 'animated',
    offset:       100
    }
);

wow.init();
</script>

Ответ 6

У меня была аналогичная проблема сегодня, потому что я использовал фиксированную ширину полосы навигации высотой 160 пикселей, содержимое было загружено, прежде чем я смог ее увидеть.

Я решил это, добавив смещение в инициализацию WOW:

new WOW({offset: 160 }).init()

Надеюсь, что это поможет.

Ответ 7

Для отскока ответа, предложенного DesignofKA, у меня была такая же проблема из-за свойства фиксированной высоты в обертке div.

Я просто запускаю wow во время события window.onload, чтобы решить проблему wow.

Мой код:

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

Ответ 8

У меня была аналогичная проблема. Я просто забыл добавить

<!DOCTYPE html>

Ответ здесь помог - wow.js работает только при прокрутке

Ответ 9

В соответствии с сообщением @DesignofKA. Для меня это противоречило этой строке кода:

 -webkit-overflow-scrolling: touch;

Надеюсь, это было полезно.