Почему не получается анимировать сайт с помощью min.wow.js и animate.css?
Для простых анимаций элементов на своем сайте я, недолго думая, решил использовать animate.css с min.wow.js на пару, чтобы анимация начинала играть только тогда, когда пользователь до нее доскроллит. В самом начале страницы (в теге head) подключаю оба инструмента - min.wow.js и animate.css:
|
1 |
<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):
|
1 |
<script> new WOW().init(); </script> |
И вот, когда уже все необходимые манипуляции завершены, добавляю к анимируемому элементу класс wow и нужный класс анимации:
|
1 |
<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
PHP1wow = new WOW({animateClass: 'animate__animated'}) wow.init();
- Кирилл Никитин, Я понял. Попробовал - не работает. Очень странно, сколько я смотрел видео и сколько читал статьи, везде сделано по-одинаковому и у всех все работало, хотя всего того, что вы мне сейчас подсказали сделать, они не делали. Почему, интересно, у меня такие проблемы?
- ITemka, ну кстати я смотрю у них в доках в html класс не ставится, то есть инициализация как я написал и так в html должно быть:
PHP1<div class="wow animate__fadeInLeft"> ... </div>
- Кирилл Никитин, К сожалению по-прежнему либо пропадает элемент, либо wow не выполняет свою работу и анимацию срабатывает преждевременно.
Благодарю за помощь! Не знаю, что еще сможет помочь. но буду продолжать искать варианты
- ITemka, сделайте codepen
- ITemka, попробовал, у меня всё работает, даже без доп настроек. Проверьте консоль ещё на ошибки, перезагрузите страницу без кэша и всё таки попробуйте воспроизвести свою проблему на codepen.
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
Для анимации элементов на сайте с помощью 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. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью.