Эффектное появление элементов при скроллинге страницы
HTML-код
- Опубликовано: 9 фев 2025
- Эффектное появление различных блоков, графиков и рисунков про прокрутке (скроллинге) страницы, уже является неотъемлемой частью большинства сайтов.
В этом уроке я покажу одно из решений для вашего сайта, основанное на использовании JavaScript плагина wow.js и набора стилей CSS Анимации animate.css
скачать wow.js - wowjs.uk/
скачать animate.css - daneden.github...
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
Спасибо большое!) Думал что с эффектами дело обстоит намного сложнее)
то что искал. Спасибо бро за видос.
Вот это я понимаю. Тактично, лаконично, конструктивно
Классное видео. Я тоже думал замудренно все будет - но оказалось все проще простого.
огромное спасибо! единственный человек, который понятно всё объяснил
То что надо и eltmentor в WP уже не надо SUPER!!!
Автору RESPECT!!!!
спасибо, мужик
как раз делаю проект и нужна была анимация для элементов
ты очень помог!пили еще видосы, респект!
01:23 испугался что наушники сломались
Спасибо большое за такую библиотеку!)
Боже как же это прекрасно, спасибо огромное!!!
Спасибо, что показал!
Супер! То что искал!)
Спасибо, очень интересный и познавательный урок!
Очень круто, спасибо, возьму на вооружение
Спасибо! То что искал!
Спасибо тебе добрый человек, ти меня спас :) Работаэт просто супер! лайк и подписка
Спасибо тебе большое!!! Удачи тебе в будущем!
1 2 3 !)) Отличное видео, спасибо что делитесь опытом!
Круто ! Я тебя люблю !
ништяк. Благодарю за видос.))
спасибо а видео, очень понятно
норм урок... полезно что-то такое и искал ;)
Супер! Спасибо огромное! Подписался!
Спасибо! то что нужно!
Михаил,благодарю. Только ты нормально обьяснил)
СПАСИБО ОГРОМНОЕ ОЧЕНЬ ПОМОГ!!!
Ожуенно, спасибо!!!!!!!!!!!!!!!!!!!!!!
Спасибо! Очень полезно!
Спасибо огромное)
Спасибо большое!
это всё конечно прикольно, вот только анимация работает 1 раз при прокрутке. А для того, чтобы она срабатывала каждый раз - нужно или оборачивать в какие-то коллбеки или накидывать прослушку на блок, хз. В любом случае этого нет в мануале библиотеки! Ровно как и в видосе(
подскажите что за анимация в начале видео,fly pages, треугольники летают по всей странице???
В Wordpress почему-то не работает. А если без WP, то прекрасно работает. Буду разбираться. Спасибо в любом случае.
sps. Было бы круто, что бы ты показал, как в вп ПРАВИЛЬНО подключить. Потому что из плагинов ничего стоящего нет. А у меня чет не робит способ с функцией ...uri().'myurl' :)
Как на Joomle применить к отдельным материлам ?
Большое спасибо!) лайк)
Спасибо)
Зачёт! )
Это круто но посмотри такую вещь как AOS это wow + animate.css вместе!
Как сделать сначала появление элемента, а после дилея скрыть элемент?
Не часто такое делаю, но лайк однозначно.
Сейчас совсем другие значения, нижние элементы все равно работают без скрола, как исправить?
Попробуйте привести класс элемента к подобию:
class="имя__вашего__блока wow animate__animated animate__имя__анимации";
Например, class="wrapper wow animate__animated animate__headShake";
У меня только так и работает при скролле. Наверно, за 3 года что-то поменяли в скриптах.)
Спасибо, помог)
кажется недавно wow.js отклчючили от animate.css, что очень печально.
Спасибо
А как сделать, чтобы при скролинге вверх подключалась таже анимация, в неограниченом количестве?)
😪😪😓😓 это слёзы счастье!!!😓😪😪😪
eeee круто, и песня топ, как песня называется)?
А как с помощью скрипта добавить к нужным блокам кассы?
Есть ВП тема, нужно чтоб виджеты и контент появлялся при прокрутке. Но вручную дописывать классы в каждый файл темы это неудобно.
Хотелось бы в одном файлике через запятую указать классы, к которым с помощью скрипта автоматом будут добавляться дополнительный классы: wow fadeInUp
Почему не подключить wow и animate через cdn?
согласен
у меня нифига не получается...(
Библиотеки конечно хорошо. Но почему бы не написать это на нативном js и css?)
дефолт верстальщики не могут в JS
Велосипед из магазина конечно хорош, но почему бы не изобрести свой?)
А можно из библиотеки скопировать кусок кода?
@@vmesto_pervogo лишние либы замедляют загрузку сайт
Привет А как сделать так чтобы только в мобильной версии срабатывал анимация?
Когда мы меняем класс, что бы был эффект. Нужно ли менять потом его в 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 потому что без этого? вертикальный скрол уберется
Все подключил -- не работает.
Настройки на анимацию в Windows в порядке, подключено все корректно, класс и стили подтягиваются.
А анимации нет...
заработало только после подключения wow.js
@@vladgromov9213 как ты ето сделал?
а если бы тэг был подключен после разметки (перед закрывающим body), то не сработало бы?
Нет, потому что элементы уже отрисовались и нечего анимировать
animate.css не скачивается что делать?
Скачать
1,2,3 1,2,3
Хороший контент!
Работающий механизм при скролле - ruclips.net/video/nCyjCpLEn3c/видео.html
не уоу, а уау
Хорошие видео, зря забросил канал
Спасибо за видео, только скажите пожалуйста, для коммерческих сайтов он платный? Просто здесь указанно, что платный... www.delac.io/wow/
к сожалению уже это не работает дизлайк ТАМ wow и анмацию в класе пишу не работа зашел на сайт а там даже дизайн другой и там написанно что надо писать "wow animate__animated animate__bounce animate__delay-2s"
Так может потому что библиотека совершенствуется/обновляется с каждый годом? Бошкой то думай
ггодно
Мда. Это можно сделать, зная основы css
Ботов не стыдно использовать?
нифига не работает!!!...
Именно графика или эффекты?
123 123
плохая библиотека
Обоснуй
Дизлайк
Спасибо большое!
Очень помогло, спасибо