Почему не получается анимировать сайт с помощью min.wow.js и animate.css?

Для простых анимаций элементов на своем сайте я, недолго думая, решил использовать animate.css с min.wow.js на пару, чтобы анимация начинала играть только тогда, когда пользователь до нее доскроллит. В самом начале страницы (в теге head) подключаю оба инструмента - min.wow.js и animate.css:

Далее инициилизирую min.wow.js (все также в теге head):

И вот, когда уже все необходимые манипуляции завершены, добавляю к анимируемому элементу класс wow и нужный класс анимации:

Как сразу элемент пропадает. То есть изначально он был на странице (и остается на ней, если проверить в инспекторе кода), но потом словно исчезает. И, самое интересное, отдельно только animate.css использовать получается, анимации применяются, но чуть только добавляю класс wow (потому что какой толк от анимации, если она проигрывается прежде чем пользователь до нее дойдет), элемент пропадает со страницы.

И по видео на YouTube пробовал делать - перепробовал несколько разных способов и вариаций, и с искусственным интеллектом советовался (представленный здесь способ он мне подсказал), все без толку. Подскажите, в чем может быть проблема)

Дополнительно:

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

Ответы:

Если речь об этом wow, то там написано:

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

Предположу, что раньше в animate.css главным классом был animated, а теперь стал animate__animated и вам надо либо запускать wow с дополнительной настройкой, либо пересобрать css.

  • либо запускать wow с дополнительной настройкой

    Это как? Все возможные (по крайней мере известные) настройки я уже проводил, тоже не получается.

    либо пересобрать css

    В каком смысле? Заново задать все стили? Думаете, там что-то мешает? Честно, тоже задумывался над этим, но что бы это могло быть?

  • ITemka, я же привёл ссылку на документацию https://wowjs.uk/docs

  • Кирилл Никитин, Я понял. Попробовал - не работает. Очень странно, сколько я смотрел видео и сколько читал статьи, везде сделано по-одинаковому и у всех все работало, хотя всего того, что вы мне сейчас подсказали сделать, они не делали. Почему, интересно, у меня такие проблемы?
  • ITemka, ну кстати я смотрю у них в доках в html класс не ставится, то есть инициализация как я написал и так в html должно быть:

  • Кирилл Никитин, К сожалению по-прежнему либо пропадает элемент, либо wow не выполняет свою работу и анимацию срабатывает преждевременно.

    Благодарю за помощь! Не знаю, что еще сможет помочь. но буду продолжать искать варианты

  • ITemka, сделайте codepen
  • ITemka, попробовал, у меня всё работает, даже без доп настроек. Проверьте консоль ещё на ошибки, перезагрузите страницу без кэша и всё таки попробуйте воспроизвести свою проблему на codepen.

 

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

 

    • Почему не получается анимировать сайт с помощью min.wow.js и animate.css?Есть ответ
    • 07.04.2024
    Ответить

    Для анимации элементов на сайте с помощью min.wow.js и animate.css необходимо убедиться, что вы правильно подключили оба скрипта и классы анимации к элементам, которые вы хотите анимировать.

    Вот несколько шагов, которые могут помочь вам решить проблему:

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

    2. Далее, инициализируйте библиотеку min.wow.js в вашем JavaScript коде:

    3. Добавьте классы анимации к элементам, которые вы хотите анимировать. Например, для анимации элемента при прокрутке страницы добавьте класс "wow" и класс анимации из animate.css, например "fadeIn":

    4. Убедитесь, что у вас правильно настроены параметры анимации в файле min.wow.js, если это необходимо. Вы можете настроить задержку, продолжительность, смещение и другие параметры анимации.

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

    Надеюсь, эти рекомендации помогут вам успешно анимировать ваш сайт с помощью min.wow.js и animate.css. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью.

Оставить комментарий