JS-решения №12. Базовая анимация при скролле на чистом JS
HTML-код
- Опубликовано: 25 авг 2024
- Привет! В новой части JS-решений я покажу, как сделать простую и удобную анимацию по скроллу на чистом js)
github.com/max... - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#ityoutubersru #скролл #анимацияприскролле
гениальность - это когда ты повторяешь весь код и он не работает и только с третей попытки ты понимаешь что просто не подключила скрипт. Браво
Мах спасибо , всегда радуете начинающих кодеров!
Пожалуйста)
супер урок,спасибо
как не хватало таких разборов,я новичёк в js и эти уроки визуализируют прочитанную теорию
успехов!
Спасибо)
@@maxgraph у вас отличная подача,есть в планах сделались подробный гайд по оптимизации скорости wp,это было бы очень полезно и интересно
1:45 Господи, как же мне сильно нужна была эта анимация, но никак её не мог найти! Спасибо вам огромное!!!😮😮😮😁😁😁 Продолжайте снимать в том же духе!!!🎉😁😁
используй IntersectionObsrverAPI вместо скролла
Классный урок, все доходчиво)) Только вместо все у нас будет хорошо, хотелось бы слышать что будет делать код))) А так всё очень понравилось!
Спасибо)
Топовый контент! Спасибо!
Полезное видео! Спасибо! Отличный канал))
Максим, спасибо огромное за это видео, попалось как нельзя кстати! Я не видела продолжения, еще нет на канале? И еще раз спасибо, твои видео уже не раз меня спасали
Продолжение было) анимация плагином
Все как всегда, четко и полезно! Но скрол ведь событие которое вызывается миллион раз, intersection observer как вариант
Да, как вариант)
Помогло, спасибо!
Отличное видео 👍 Всё доступно и понятно, буду экспериментировать 😊 Продвижения каналу 😉
Спасибо)
Спасибо за отличное решение
пошёл пробовать
Мое почтение 👍
Классно
А это хорошая идея для небольшого плагина :)
Это база для любого сайта.
Отличное видео, но мне кажется, что не хватает хотя бы базового напоминания о производительности. На скролл можно повесить очень тяжёлую функцию с большой перерисовкой и сайт превратится в тыкву. В будущем видео отлично было бы затронуть эту тему
+
Сталкиваясь с этим вопрос все упускают важный момент - производительность. Добавляя допустим какой-нибудь цикл в обработчик scroll, означает, что каждый раз при скролле это будет запускаться очень много раз, тем самым влияя на производительность.
И на это очень мало информации, и почему-то всеми игнорируется.
вот бы gsap на этот канал. Чумовая штука
Есть уже несколько)
У функции, добавляющей класс animation-class есть очень интересный баг точнее это даже не баг, а просто особенность метода offsetTop. Если прописать position:relativе родительскому контейнеру, в котором содержатся элементы с классом scroll-item, то при попытке скролла им сразу присвоится animation. вот такие дела, вместо offsetTop можно вариант с getBoundingClientRect нарисовать.
Здравствуйте в двух проектах такой баг, не подскажите как исправить )
@@user-hw9iu6fe8x Я уже точно не помню, один из вариантов это использовать getBoundingClientRect, второй вариант это поменять стили, третий вариант взять offsetTop до нужного блока, потом получить его высоту и уже исходя из этой высоты прописывать анимацию при скроле для элементов.
хорошее, полезное видео. расскажи о горизонтальной анимации как в конце видео.
Спасибо
Спасибо за уроки. Скажите, почему может animation-class сразу присваиваться, никаких изменений не происходит при скролле?
Очень круто! Я для себя еще добавил дата атрибут, если он есть, то анимация проигруется лишь раз, если нету, то повторяется при скролле обратно, как на видео. Ты обычно используешь именно что-то свое для анимации, или подключаешь стороннее?
Да по-разному. Могу и greensock подключить
Здравствуйте! А когда будет Js, вроде хотели делать!? Отдельное спасибо за полезный и качественный контент!
Здравствуйте, делаю. Хочу сперва все сделать, потом выкладывать)
Через месяц-два будет
@@maxgraph понял. Ждём) Спасибо
Thanks a lot
хотелось бы послушать про Gsap, а точнее про ScrollTrigger и что-то тяжелее чем простые фишки
Уже есть кое что на канале
не могу понять, а в чём разница анимации через keyframes или просто через транзишены? просто удобством ?
Кейфреймы можно вызывать без событий (наведение и тд)
Максим здравствуйте, помогите решить проблему) анимация некоторых элементов не срабатывает. я так понимаю из за position relative у родителя. Это связанно offsetTop? как это исправить или чем заменить offsetTop?
Я бы посмотрел в сторону intersection observer
Может вы расскажете про библиотеку GSAP ? Например сделать какую то крутую анимацию с ним)
Расскажу
@@maxgraph лично я еще бы глянул примеры использования нативного js вместо gsap. Как в этом ролике, к примеру. (замена gsap scrollTrigger в 20ти минутном видео (: )
Контент топ, спасибо вам
Спасибо за полезное видео. А как сделать, чтобы анимация срабатывала только один раз. То есть при повторном скроле просмотренного участка она не срабатывала?
Убрать else в условии, чтобы класс не удалился
Видео интересное! Так держать! У меня тут один вопрос есть. У меня есть фиксированная шапка. Как сделать так, чтобы шапка исчезала при скролле вниз а когда вверх - появилась снова? Коды, которые находила в интернете, не работали😢 А я новичок и не понимаю в чём проблема
Прямо сегодня выйдет видео на эту тему))
@@maxgraph ❤️👍🤗
снимите, пожалуйста, видео про анимацию при скролле на jquery. Анимацию сделала по вашему уроку, но она не работает в Таплинке.
Вряд ли на канале будет что-то по jq, извините)
А как сделать, чтобы при загрузке страницы, анимация первого блока срабатывала автоматически? А то когда пользователь условно заходит на страницу сайта, необходимо проскролить немного вниз, чтобы началась анимация у объектов первого блока. Получается не очень красиво(
Можно вызвать анимацию не на скролл, а просто
@@maxgraphточно, спасибо!
Здравствуйте, можно ли использовать этот код в react.js??
А почему нет?
Зачем в скрипте задавать маргин для отступа за навигацией? Не лучше ли будет сделать навигацию абсолютной и отступ задать заранее в стилях уже
Не лучше, а одно из решений
@@maxgraph ну как же
Если все это будет прописываться из скрипта то нагрузка будет на много больше ежели прописывалось бы сразу же из стилей
@@maxgraph ну может я ошибаюсь, я совсем новичок можно сказать ахах
Так всё отлично и понятно, но вот часть функций не работает и всё тут. С margin на самом деле полезное решение, т.к. в стилях не всегда получается его прописать, особенно когда речь идёт об относительных величинах, которые могут меняться в зависимости от объёма контента. Но эта зараза не хочет выводить переменные значения, выводит лишь постоянные, типа '80px' или 'unset', а высчитывать что-то отказывается. Рад, что хоть с шапкой сайта проблем нет. )))
Не понял, что именно не работает))
@MaxGraph - cайты как страсть
Вместо hero.style.marginTop = '${header.offsetHeight}px' сразу выводится значение hero.style.marginTop = '0px' и не реагирует на прокрутку. И с многозадачной анимацией элементов scrollItems проблемы - сразу присваивается элементам класс animation-class и не реагирует на скролл страницы. Хотя вполне возможно, что я где-то накосячил, но вроде всё раз 10 перепроверил ничего не нашёл. Либо у Wordpress есть какие-то особенности.
Я не силён в JS от слова совсем. Только по урокам и остаётся хоть как-то разнообразие на сайт вносить. 😄
Где-то косячок в коде, не иначе)
@@maxgraph Ок. Понял. Спасибо. Значит буду дальше колупать код, есть смысл. ))
@MaxGraph - cайты как страсть
Я явно чего-то не понимаю 😩
const paddingHeight = scrollItemsTop.offsetTop; //в консоле выводит 184px, прокрутка на значение не влияет - то, что нужно.
scrollCont.style.paddingTop = '184px'; - пишешь так, всё работает.
scrollCont.style.paddingTop = '${paddingHeight}px'; - а так не хочет, хотя разницы по идеи никакой нет. Так даже внутренний отступ в стиль блока не подгружает.😵💫
И здесь статически в CSS не задать, как писали в комментариях ниже, т.к. у каждой страницы это расстояние от верхнего края блока до верхней границы экрана будет своё и зависит от наполнения. Так, что отступы через JS штука нужная. 👍
Что означает название переменой hero?
Так принято называть первый блок сайта
Это просто сделать. А как сделать анимацию объектов при скроллинге? Я имею ввиду такую анимацию: south-stream-transport.com
scrollTrigger в GSAP, видимо)
@@maxgraph А можно как-то по другому сделать, а то очень сложно таким способом понять.
Вот не пойму зачем так много писать и так долго на ванильном js если всё то-же самое на jq делается в 2 строки. Хотя наверное для урока и лучшего понимания материала оно и надо. Но для работы мало применимо, когда у тебя сроки и нет времени писать это всё каждый раз ради элементарных эффектов.
Jq - лишняя нагрузка, лишние килобайты
@@maxgraph ага, только килобайта перестали экономить лет 20 назад. Клиент всё равно попросит подключить пять пикселей, чат, капчу и прочую хрень. QJ от этого добра 1% займёт. А вот время разработки сокращает кратно.
Ничего подобного) как экономили, так и экономят
@@maxgraph у тебя ода жизнь. Чтобы сэкономить килобайт ты тратишь несколько минут жизни. Это невосполнимый ресурс. А браузер сэкономленный килобайт не заметит. JQ весит меньше чем фотка, что там экономить на спичках то? Лучше бы жизнь поэкономил. Но как знаешь...
А я то причём тут😀😀