Анимация элементов при скролле страницы | AOS
HTML-код
- Опубликовано: 11 окт 2024
- В этом видео разберем скрипт, который позволяет создавать анимацию элементов при скролле страницы. Скрипт называется AOS и он работает без JQuery.
// Ссылки =================
michalsnik.git...
files.brainscl...
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#javascript #js
![VENEZUELA vs. ARGENTINA [1-1] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 9](http://i.ytimg.com/vi/SJfoPdeOPCQ/mqdefault.jpg)
Всегда удивлялся, как другие делают на сайте клевые анимации (на лэндингах в основном), думал это сложно, оказывается - все проще, когда есть AOS! Спасибо большое.
Вот и я добрался до уровня анимирования, привет Дмитрий =))
Отличный урок, Дмитрий! Спасибо.
Крутяк! Никаких танцев с бубном, Все работает! Автору либы и автору видео респектище!!!
Дима, большое тебе человеческое спасибо!)
Спасибо! Полезная информация.
По сути аналог связки wow.js + animate.css
Superski useful lesson in practice :)
You are a mega teacher!
Great thanks you
Dmitry!
за Анчор лайк )) а вообще полезный и удобный скрипт
Cпасибо огромное! а я вот мучалась не могла понять, что с этими скриптами делать)
Почему вы сейчас не выпускаете таких коротких видео? это очень актуальная рубрика. прошу вас выпускайте такое почаще!!!
Все ясно и понятно! Лайк и подписка!
можете подсказать почему когда я устонавливаю data-aos="fade-in" исчезает элемент и не появляется, что делать?
👍🏻
класс!
Спасибо Дим, полезная инфа !!!
ты лучший бро
Спасибор большое! Получилось)
Классная библиотека! Спасибо!
спасибо!
Подскажите кто знает, что делать с конфликтом подключенного на сайте jquery + этот АОS. (Подключаю плагин aos указываю нужную анимацию, а она немного не так работает из-за конфликта с выше подключенным jquery)
Спасибо
Спасибо сенсей))
Эксперты, подскажите, стоит ли самой учиться делать такие штуки или лучше не изобретать велосипед?
спасибо, за видео!!! есть кто анимировал элементы в слайдере с помощью AOS , не могу понять что и куда привязывать, чтобы элементы анимировались каждый раз при переключении слайда
братан ты просто бог!
Как сделать такую анимацию на слайдере swiper, например, чтобы срабатывала на каждом слайде?
Спасибо за урок а первые видительные элементы не анимируется ?
Подскажите кто знает, что делать с конфликтом подключенного на сайте jquery + этот АОS. Aos начинает работать не корректно, не только у меня такая проблема
такая же фигня, вы за месяц узнали, как обойти эту проблемку?
@@melissasofie7681 Нет, воспользовался wow.js результат идентичный будет
@@melissasofie7681 $j = jQuery.noConflict();
Спасибо большое за видео! Оказывается создать анимацию очень просто. Но у меня проблема, судя по всему из за использовании АОС Анимации появляется белая полоса справа и полоса прокрутки снизу. Причем они пропадают, когда пролистаешь страницу до конца и анимируются все эффекты
overflow: hidden; для страницы вам поможет
@@BrainsCloud Вы не представляете, как Вы мне помогли! спасибо Вам большое!
Автор не сказал что этот способ абсолютно не приспособлен для мобилок! На телефоне элементы появляются тогда, когда проскролливаешь до конца элемента.
Спасибо. А как сделать так чтобы новая анимация отрабатывала 1 раз при прокрутке вниз ?
once: true
Интересно, но анЧор просто убивает. На гугл транслейт можно послушать как правильно произносить anchor.
Я до этого использовал свой скрипт но был какой то геморрой сейчас использую этот плагин ну и для сдайдер тоже использую плагин
Подскажи пожалуйста, почему если ставишь анимацию слева справа, то на моб версии появляется горизонтальный скролл
html {
overflow-x: hidden
}
не советую пользоваться готовыми решениями не понимая как это работает
Выбрал aos, потому что он весит гараздо меньше чем animate и wow
сделал всё как у тебя , не работает(
у меня элемент просто пропадает((
Здраствуйте, у меня тоже, получилось у вас решить?
По сути пересказ доки
Ну такое. Если руки есть, зачем подключать эту библу. К примеру задачу по затемнению блока и увелbчиния фоновой картинки при скроле она не решит. А это всего лишь подмена класса на js. Так что лучше учите js!)
самое что интересное, давно думаю как эту фишку решить и решений разных много, но пипец замороченных, а тебя постоянно смотрю и это видео как то упустил...
анЧор!!! За что!!! Лучше бы я не заканчивал иняз. Кровь из ушей так и льет. Все остальное - норм!