Эффектное появление элементов при скроллинге страницы
HTML-код
- Опубликовано: 10 фев 2025
- Эффектное появление различных блоков, графиков и рисунков про прокрутке (скроллинге) страницы, уже является неотъемлемой частью большинства сайтов.
В этом уроке я покажу одно из решений для вашего сайта, основанное на использовании JavaScript плагина wow.js и набора стилей CSS Анимации animate.css
скачать wow.js - wowjs.uk/
скачать animate.css - daneden.github...
![How to protect your video content by adding DRM? [Complete Guide]](http://i.ytimg.com/vi/k0rl-F-3BB8/mqdefault.jpg)
Спасибо большое!) Думал что с эффектами дело обстоит намного сложнее)
то что искал. Спасибо бро за видос.
Вот это я понимаю. Тактично, лаконично, конструктивно
Классное видео. Я тоже думал замудренно все будет - но оказалось все проще простого.
огромное спасибо! единственный человек, который понятно всё объяснил
То что надо и eltmentor в WP уже не надо SUPER!!!
Автору RESPECT!!!!
спасибо, мужик
как раз делаю проект и нужна была анимация для элементов
ты очень помог!пили еще видосы, респект!
Спасибо, что показал!
Супер! То что искал!)
Спасибо большое за такую библиотеку!)
01:23 испугался что наушники сломались
Боже как же это прекрасно, спасибо огромное!!!
Спасибо, очень интересный и познавательный урок!
Очень круто, спасибо, возьму на вооружение
Спасибо! То что искал!
Спасибо тебе большое!!! Удачи тебе в будущем!
спасибо а видео, очень понятно
Круто ! Я тебя люблю !
1 2 3 !)) Отличное видео, спасибо что делитесь опытом!
Спасибо тебе добрый человек, ти меня спас :) Работаэт просто супер! лайк и подписка
ништяк. Благодарю за видос.))
СПАСИБО ОГРОМНОЕ ОЧЕНЬ ПОМОГ!!!
Супер! Спасибо огромное! Подписался!
норм урок... полезно что-то такое и искал ;)
Ожуенно, спасибо!!!!!!!!!!!!!!!!!!!!!!
Михаил,благодарю. Только ты нормально обьяснил)
Спасибо! то что нужно!
Спасибо! Очень полезно!
Спасибо огромное)
Спасибо большое!
это всё конечно прикольно, вот только анимация работает 1 раз при прокрутке. А для того, чтобы она срабатывала каждый раз - нужно или оборачивать в какие-то коллбеки или накидывать прослушку на блок, хз. В любом случае этого нет в мануале библиотеки! Ровно как и в видосе(
подскажите что за анимация в начале видео,fly pages, треугольники летают по всей странице???
Большое спасибо!) лайк)
Спасибо)
Зачёт! )
Спасибо, помог)
Это круто но посмотри такую вещь как AOS это wow + animate.css вместе!
sps. Было бы круто, что бы ты показал, как в вп ПРАВИЛЬНО подключить. Потому что из плагинов ничего стоящего нет. А у меня чет не робит способ с функцией ...uri().'myurl' :)
Как на Joomle применить к отдельным материлам ?
В Wordpress почему-то не работает. А если без WP, то прекрасно работает. Буду разбираться. Спасибо в любом случае.
Спасибо
😪😪😓😓 это слёзы счастье!!!😓😪😪😪
Как сделать сначала появление элемента, а после дилея скрыть элемент?
кажется недавно wow.js отклчючили от animate.css, что очень печально.
Не часто такое делаю, но лайк однозначно.
Сейчас совсем другие значения, нижние элементы все равно работают без скрола, как исправить?
Попробуйте привести класс элемента к подобию:
class="имя__вашего__блока wow animate__animated animate__имя__анимации";
Например, class="wrapper wow animate__animated animate__headShake";
У меня только так и работает при скролле. Наверно, за 3 года что-то поменяли в скриптах.)
eeee круто, и песня топ, как песня называется)?
А как сделать, чтобы при скролинге вверх подключалась таже анимация, в неограниченом количестве?)
А как с помощью скрипта добавить к нужным блокам кассы?
Есть ВП тема, нужно чтоб виджеты и контент появлялся при прокрутке. Но вручную дописывать классы в каждый файл темы это неудобно.
Хотелось бы в одном файлике через запятую указать классы, к которым с помощью скрипта автоматом будут добавляться дополнительный классы: wow fadeInUp
Библиотеки конечно хорошо. Но почему бы не написать это на нативном js и css?)
дефолт верстальщики не могут в JS
Велосипед из магазина конечно хорош, но почему бы не изобрести свой?)
А можно из библиотеки скопировать кусок кода?
@@vmesto_pervogo лишние либы замедляют загрузку сайт
Почему не подключить wow и animate через cdn?
согласен
у меня нифига не получается...(
спасибо
у меня проловина эффектов не работает, что делать?
Когда мы меняем класс, что бы был эффект. Нужно ли менять потом его в CSS?
Просто сделай несколько классов к div
а можно как то чтобы эффект срабатывал не 1 раз при скролле а каждый раз когда переходишь на видимую область?
Тоже интересует этот вопрос, ответа еще не нашли случаем?
data-wow-iteration: infinite
Привет А как сделать так чтобы только в мобильной версии срабатывал анимация?
Спасибо за урок. Подскажите, пожалуйста, у меня такая ситуация : есть слайдер, на каждом изображении которого наложен текст. И каким образом можно сделать появление этого текста на каждом слайде с задержкой ? У меня эффект применяется только на первом слайде, а на следующих - уже нет. Я пробовал добавлять классы wow и для изображения и для блока с текстом, но безрезультатно. Тут как бы получается, что все элементы в фокусе, так как они завязаны на родителе, и скрипт выполняется только на первом слайде. И ставить для каждого слайда разную задержку - нельзя. Неизвестно, когда пользователь пролистает слайды. Что в такой ситуации делать ? Искать какие-то допольнительные скрипты и прописывать к изобажениям ?
Я посмотрел на сайте, где реализована такая фича, и там изначально у слайда стоит класс not-animate, а при открытии класс уже меняется на animate. Прописан в теге HTML. Я же добавляю через CSS классы, чтобы в самих тегах не писать всё это дело: "data-caption-animate" и т.д. Как отследить, что слайд перелистан ? я в JS и jQuery полный ноль )
Всё, понял. Если использовать slick.js (который я использую), то при перелистывании слайда, активному присваивается класс .slick-active. И вот теперь остаётся только задать для .slick-active >.slide-text какой нибудь translate или animation. Как всё просто оказалось )
можешь, пожалуйста, подробнее рассказать. с таким же столкнулся, но не совсем понял)
Роман Литвин привет. Я использую слайдер slick. Или slick.js. У каждого слайда, который в данный момент на экране есть класс, который даёт ему slick. И этот класс называется slick-active. Вот к нему я и обращаюсь. Таким образом я могу сделать анимацию текста (плавное появление) на каждом новом слайде. Иначе, анимация будет применяться только один раз на первом слайде прр загрузке страницы или прокрутки до этого места. Чтобы вычислить класс, если вы используете не slick, то открываете панель разработчика, выбираете элемент и видите изменения в виде добавления новых классов и других параметров
классный видос, помог)
Подскажите пожалуйста, как сделать так, чтобы элементы обратно заезжали за край страницы при прокрутке вверх.
через запятую второй эффект пишешь и все
Все конечно очень круто, но когда пользуешься fadeInRight появляется горизонтальный скролл на время пока элемент выезжает из-за угла. Хотелось бы узнать, можно ли от этого как-нибудь избавиться?
Он только у вас появляется, смотрите что у вас в верстке.
Я написал потому что в примере скролл появляется. От 6-17 посмотрите.
Проблему не решила, поэтому отключила горизонтальный скролл.
добавьте body {overflow: hidden}
body ( overflow-x: hidden; ) именно -x потому что без этого? вертикальный скрол уберется
а если бы тэг был подключен после разметки (перед закрывающим body), то не сработало бы?
Нет, потому что элементы уже отрисовались и нечего анимировать
Все подключил -- не работает.
Настройки на анимацию в Windows в порядке, подключено все корректно, класс и стили подтягиваются.
А анимации нет...
заработало только после подключения wow.js
@@vladgromov9213 как ты ето сделал?
Спасибо за видео, только скажите пожалуйста, для коммерческих сайтов он платный? Просто здесь указанно, что платный... www.delac.io/wow/
animate.css не скачивается что делать?
Скачать
не уоу, а уау
Хороший контент!
Работающий механизм при скролле - ruclips.net/video/nCyjCpLEn3c/видео.html
Хорошие видео, зря забросил канал
к сожалению уже это не работает дизлайк ТАМ wow и анмацию в класе пишу не работа зашел на сайт а там даже дизайн другой и там написанно что надо писать "wow animate__animated animate__bounce animate__delay-2s"
Так может потому что библиотека совершенствуется/обновляется с каждый годом? Бошкой то думай
1,2,3 1,2,3
Ботов не стыдно использовать?
ггодно
нифига не работает!!!...
Именно графика или эффекты?
Мда. Это можно сделать, зная основы css
123 123
плохая библиотека
Обоснуй
Дизлайк
Спасибо большое!
Очень помогло, спасибо