JS-решения №12. Базовая анимация при скролле на чистом JS

У функции, добавляющей класс animation-class есть очень интересный баг точнее это даже не баг, а просто особенность метода offsetTop. Если прописать position:relativе родительскому контейнеру, в котором содержатся элементы с классом scroll-item, то при попытке скролла им сразу присвоится animation. вот такие дела, вместо offsetTop можно вариант с getBoundingClientRect нарисовать.

пошёл пробовать

Помогло, спасибо!

Полезное видео! Спасибо! Отличный канал))

не могу понять, а в чём разница анимации через keyframes или просто через транзишены? просто удобством ?

гениальность - это когда ты повторяешь весь код и он не работает и только с третей попытки ты понимаешь что просто не подключила скрипт. Браво

Мое почтение 👍

Спасибо за уроки. Скажите, почему может animation-class сразу присваиваться, никаких изменений не происходит при скролле?

Классно

А как сделать, чтобы при загрузке страницы, анимация первого блока срабатывала автоматически? А то когда пользователь условно заходит на страницу сайта, необходимо проскролить немного вниз, чтобы началась анимация у объектов первого блока. Получается не очень красиво(

Вот не пойму зачем так много писать и так долго на ванильном js если всё то-же самое на jq делается в 2 строки. Хотя наверное для урока и лучшего понимания материала оно и надо. Но для работы мало применимо, когда у тебя сроки и нет времени писать это всё каждый раз ради элементарных эффектов.

Так всё отлично и понятно, но вот часть функций не работает и всё тут. С margin на самом деле полезное решение, т.к. в стилях не всегда получается его прописать, особенно когда речь идёт об относительных величинах, которые могут меняться в зависимости от объёма контента. Но эта зараза не хочет выводить переменные значения, выводит лишь постоянные, типа '80px' или 'unset', а высчитывать что-то отказывается. Рад, что хоть с шапкой сайта проблем нет. )))

вот бы gsap на этот канал. Чумовая штука

хотелось бы послушать про Gsap, а точнее про ScrollTrigger и что-то тяжелее чем простые фишки

снимите, пожалуйста, видео про анимацию при скролле на jquery. Анимацию сделала по вашему уроку, но она не работает в Таплинке.

хорошее, полезное видео. расскажи о горизонтальной анимации как в конце видео.

Если у родителя position: relative то класс присваивается сразу при загрузки страницы и все, анимация не работает.

Зачем в скрипте задавать маргин для отступа за навигацией? Не лучше ли будет сделать навигацию абсолютной и отступ задать заранее в стилях уже

Все как всегда, четко и полезно! Но скрол ведь событие которое вызывается миллион раз, intersection observer как вариант

Видео интересное! Так держать! У меня тут один вопрос есть. У меня есть фиксированная шапка. Как сделать так, чтобы шапка исчезала при скролле вниз а когда вверх - появилась снова? Коды, которые находила в интернете, не работали😢 А я новичок и не понимаю в чём проблема

Максим, спасибо огромное за это видео, попалось как нельзя кстати! Я не видела продолжения, еще нет на канале? И еще раз спасибо, твои видео уже не раз меня спасали

Очень круто! Я для себя еще добавил дата атрибут, если он есть, то анимация проигруется лишь раз, если нету, то повторяется при скролле обратно, как на видео. Ты обычно используешь именно что-то свое для анимации, или подключаешь стороннее?

Классный урок, все доходчиво)) Только вместо все у нас будет хорошо, хотелось бы слышать что будет делать код))) А так всё очень понравилось!

А это хорошая идея для небольшого плагина :)

Мах спасибо , всегда радуете начинающих кодеров!

Здравствуйте, можно ли использовать этот код в react.js??

супер урок,спасибо
как не хватало таких разборов,я новичёк в js и эти уроки визуализируют прочитанную теорию
успехов!

Как вам Дед? Кодзима гений?

Всё классно.

Спасибо за полезное видео. А как сделать, чтобы анимация срабатывала только один раз. То есть при повторном скроле просмотренного участка она не срабатывала?

Thanks a lot

Что означает название переменой hero?

Может вы расскажете про библиотеку GSAP ? Например сделать какую то крутую анимацию с ним)

Отличное видео, но мне кажется, что не хватает хотя бы базового напоминания о производительности. На скролл можно повесить очень тяжёлую функцию с большой перерисовкой и сайт превратится в тыкву. В будущем видео отлично было бы затронуть эту тему

Топовый контент! Спасибо!

Отличное видео 👍 Всё доступно и понятно, буду экспериментировать 😊 Продвижения каналу 😉

Здравствуйте! А когда будет Js, вроде хотели делать!? Отдельное спасибо за полезный и качественный контент!