Почему не работает wow js

Обновлено: 16.05.2024

Третий, с задержкой данных более одной секунды, не исчезает. Он постепенно исчезает (не слева).

Это мой взгляд. У меня есть три элемента списка на странице.

Почему не работает animate.css (и wow)?

Не работает animate.css и wow. Сайт на WordPress. В консоли нет ошибок. Не работает даже просто animate.css без wow.

Скрипт вроде подключил правильно, в html прописал классы.

Мой код из functions.php :

Возможно при вызове WOW().init(); еще не загрузился сам скрпт. Попробуйте сделать вызов внутри jQuery(document).ready(function( $ ) < >);

2 ответа

Ваш код достаточно близок, проверил поведение и обнаружил, что вы должны добавить дополнительный класс animated для работы.

Однако то, что вы хотите сделать, похоже, не требует wow.js для достижения, просто используйте

Для отображения с анимацией, затем используйте

Чтобы скрыть это должно быть достаточно, добавил пример к сниппету.

Пожалуйста, укажите мне, если я неправильно понял, чего вы хотите достичь.

Вместо этого вы должны использовать продолжение анимации с прокруткой . Я думаю, что лучше, когда вы используете прокрутку на их месте, анимация также будет работать нормально . Вот так . И вы также можете проверить мой пример в Codepen

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

wow.js не работает

Я только что попытался внедрить wow.js на свой сайт, но он не будет работать. Я связал все, но я не знаю, почему это не работает. Я даже добавил wow.js и связал его с HTML, но, похоже, ничего не работает. Я также добавил animate.css и до сих пор нет эффекта.

HTML

javascript

4 ответа

Я знаю, что эта ветка немного старая, но я решил опубликовать то, что знаю об этом:

Попробуйте использовать класс раздела.

Убедитесь, что ваш сценарий верен и что вы правильно вводите «wow.js» ИЛИ «wow.min.js» для минимальной версии. Если нет, то у вас будут анимации, но нет задержки или прокрутки в wow.js.

У меня тоже была такая же проблема. Я нашел обходной путь, который должен был добавить эти встроенные стили:

Style = "- webkit-animation-duration: 3 с; -moz-animation-duration: 3 с; Продолжительность анимации: 3 с;"

API Wow.js также использует секунды для анимации.

Например, data-wow-delay = "2s" будет работать просто отлично. Я не уверен насчет "1.2".

3 ответа

Вы уверены, что правильно включили все библиотеки и они загружаются - проверьте вкладку сети в консоли разработчика.
Библиотеки включены из cdn:

Для меня это работало хорошо после вызова WOW при событии загрузки окна в дополнение к событию готовности документа:

Вероятно должно быть

Вы также можете избавиться от атрибутов language и type , они бесполезны и не совместимы с W3C.

Wow JS не работает с прокруткой

Я использую wow js и animated.css, это потрясающе, мне очень нравится, у меня возникла небольшая проблема, когда я попытался запустить эффект, когда пользователь прокручивает 500px.

Я вижу, как jquery вставляет класс для запуска эффекта, но я не вижу эффекта, а также, если мой jquery уродлив, пожалуйста, не стесняйтесь исправлять тоже.

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

Html после запуска эффекта:

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

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

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

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

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

Читайте также: