Почему не получается анимировать сайт с помощью min.wow.js и animate.css?
Для простых анимаций элементов на своем сайте я, недолго думая, решил использовать animate.css с min.wow.js на пару, чтобы анимация начинала играть только тогда, когда пользователь до нее доскроллит. В самом начале страницы (в теге head) подключаю оба инструмента - min.wow.js и animate.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
Далее инициилизирую min.wow.js (все также в теге head):
<script> new WOW().init(); </script> |
<script> new WOW().init(); </script>
И вот, когда уже все необходимые манипуляции завершены, добавляю к анимируемому элементу класс wow и нужный класс анимации:
<div class="wow animate__animated animate__fadeInLeft"> <p class="name">тестовый элемент</p> <p class="presents">тестовый элемент</p> </div> |
<div class="wow animate__animated animate__fadeInLeft"> <p class="name">тестовый элемент</p> <p class="presents">тестовый элемент</p> </div>
Как сразу элемент пропадает. То есть изначально он был на странице (и остается на ней, если проверить в инспекторе кода), но потом словно исчезает. И, самое интересное, отдельно только 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
wow = new WOW({animateClass: 'animate__animated'}) wow.init();
wow = new WOW({animateClass: 'animate__animated'}) wow.init();
- Кирилл Никитин, Я понял. Попробовал - не работает. Очень странно, сколько я смотрел видео и сколько читал статьи, везде сделано по-одинаковому и у всех все работало, хотя всего того, что вы мне сейчас подсказали сделать, они не делали. Почему, интересно, у меня такие проблемы?
- ITemka, ну кстати я смотрю у них в доках в html класс не ставится, то есть инициализация как я написал и так в html должно быть:
<div class="wow animate__fadeInLeft"> ... </div>
<div class="wow animate__fadeInLeft"> ... </div>
- Кирилл Никитин, К сожалению по-прежнему либо пропадает элемент, либо wow не выполняет свою работу и анимацию срабатывает преждевременно.
Благодарю за помощь! Не знаю, что еще сможет помочь. но буду продолжать искать варианты
- ITemka, сделайте codepen
- ITemka, попробовал, у меня всё работает, даже без доп настроек. Проверьте консоль ещё на ошибки, перезагрузите страницу без кэша и всё таки попробуйте воспроизвести свою проблему на codepen.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для анимации элементов на сайте с помощью min.wow.js и animate.css необходимо убедиться, что вы правильно подключили оба скрипта и классы анимации к элементам, которые вы хотите анимировать.
Вот несколько шагов, которые могут помочь вам решить проблему:
1. Убедитесь, что вы правильно подключили min.wow.js и animate.css к вашему проекту. Для этого вам нужно добавить ссылки на эти файлы в разделе вашего HTML документа:
2. Далее, инициализируйте библиотеку min.wow.js в вашем JavaScript коде:
new WOW().init();
3. Добавьте классы анимации к элементам, которые вы хотите анимировать. Например, для анимации элемента при прокрутке страницы добавьте класс "wow" и класс анимации из animate.css, например "fadeIn":
<div class="wow fadeIn"></div>
4. Убедитесь, что у вас правильно настроены параметры анимации в файле min.wow.js, если это необходимо. Вы можете настроить задержку, продолжительность, смещение и другие параметры анимации.
Если после выполнения этих шагов анимация все равно не работает, попробуйте проверить консоль браузера на наличие ошибок. Возможно, вы упустили какие-то детали или есть конфликт с другими скриптами на странице.
Надеюсь, эти рекомендации помогут вам успешно анимировать ваш сайт с помощью min.wow.js и animate.css. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью.