Почему WOW.js не работает и оставляет невидимые элементы позади?

Question

У меня есть веб-сайт на моем локальном компьютере, и я связал его с wow.min.js. (Я не знаю, стоит ли мне загружать всю библиотеку или только этот файл; я сделал оба пути, но все же не повезло.) Я попытался:

Со всей загруженной библиотекой:

<script src="WOW-master/dist/wow.min.js"></script>

Только с этим файлом в том же каталоге:

<script src="WOW-master/dist/wow.min.js"></script>

И с этим CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js">

Не повезло ни с одним из этих ^ Со всеми этими вариантами я использовал это как Интеграцию WOW:

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

Это будет целевой элемент:

<i class="fa fa-pencil-square-o fa-3x wow slideInLeft" id="icons" aria-hidden="true"></i>

Я знаю, что animate.css работает отлично, потому что, если я напишу приведенный выше код так:

<i class="fa fa-pencil-square-o fa-3x animate infinite slideInLeft" id="icons" aria-hidden="true"></i>

Я вижу анимацию, работающую, бесконечно.

Вместо запуска при прокрутке, он просто оставляет элемент без видимости (видимость: скрытый?), И вы вообще не можете видеть целевой элемент.

В чем может быть проблема?

Я скачал все эти файлы с официальной страницы GitHub для WOW

Прямая ссылка на сайт находится здесь: http://stackruproblems.site88.net/index.html

Плохой сайт / хост и нет фотографий, так как они были слишком большими (>1 МБ) для бесплатного хоста, который я использовал. Кроме того, JavaScript не работает, как только я загрузил его. но это не центр этого вопроса. Код все еще там, надеюсь, это достаточно хорошо. Спасибо!

Answer 1

У меня была та же проблема, что и у вас, пока я не вернулся к своему CSS и не заметил, что дал тегу body скрытое свойство overflow-x:

body, html {
    /* Some stuff here */
    overflow-x: hidden;
}

Как только я удалил ее, эта проблема была решена, и анимации снова начали работать. Фактически это известная проблема в библиотеке wowJS. так, чтобы решить это, просто удалите overflow-x скрытый.

Answer 2

Не добавлять overflow-x: hidden; на вашем CSS или стиле. Это не сработает, если у вас есть overflow-x: hidden; на ваших стилях.