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

[@ВикторияНеброй]

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

[@alexandrgusletsov2567]

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

[@maxgraph]

Пожалуйста)

[@TheZUB95]

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

[@maxgraph]

Спасибо)

[@TheZUB95]

@@maxgraph у вас отличная подача,есть в планах сделались подробный гайд по оптимизации скорости wp,это было бы очень полезно и интересно

[@alseos4023]

1:45 Господи, как же мне сильно нужна была эта анимация, но никак её не мог найти! Спасибо вам огромное!!!😮😮😮😁😁😁 Продолжайте снимать в том же духе!!!🎉😁😁

[@EugeneKh.]

используй IntersectionObsrverAPI вместо скролла

[@АнатолийГорбов-о1ь]

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

[@100groshi]

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

[@maxgraph]

Да, как вариант)

[@aleksandrkhabarov6026]

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

[@maxgraph]

Спасибо)

[@АртёмПереславцев-й1ъ]

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

[@super_snejinka]

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

[@maxgraph]

Продолжение было) анимация плагином

[@marishakarpova8278]

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

[@maxgraph]

Спасибо)

[@MeME59356]

Спасибо за отличное решение

[@epicshorsviral]

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

[@amaronov]

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

[@DerAleksey]

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

[@Sufferer12]

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

[@Maxim9575]

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

[@ДмитрийСтрелков-ц2м]

Это база для любого сайта.

[@NotForSale49]

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

[@Вселучшеедетям-ы7м]

Здравствуйте в двух проектах такой баг, не подскажите как исправить )

[@NotForSale49]

@@Вселучшеедетям-ы7м Я уже точно не помню, один из вариантов это использовать getBoundingClientRect, второй вариант это поменять стили, третий вариант взять offsetTop до нужного блока, потом получить его высоту и уже исходя из этой высоты прописывать анимацию при скроле для элементов.

[@Andrey_4dev]

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

[@goodman4493]

+ Сталкиваясь с этим вопрос все упускают важный момент - производительность. Добавляя допустим какой-нибудь цикл в обработчик scroll, означает, что каждый раз при скролле это будет запускаться очень много раз, тем самым влияя на производительность. И на это очень мало информации, и почему-то всеми игнорируется.

[@1Nurali]

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

[@maxgraph]

Есть уже несколько)

[@АлексейГ-ц9ю]

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

[@maxgraph]

Спасибо

[@miraigrafit7865]

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

[@maxgraph]

Да по-разному. Могу и greensock подключить

[@k0rsoYD]

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

[@maxgraph]

Уже есть кое что на канале

[@vodoo8854]

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

[@maxgraph]

Здравствуйте, делаю. Хочу сперва все сделать, потом выкладывать) Через месяц-два будет

[@vodoo8854]

@@maxgraph понял. Ждём) Спасибо

[@_onesevenfive_]

Thanks a lot

[@dmitryg.9533]

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

[@maxgraph]

Кейфреймы можно вызывать без событий (наведение и тд)

[@sweetknitt4259]

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

[@maxgraph]

Вряд ли на канале будет что-то по jq, извините)

[@Вселучшеедетям-ы7м]

Максим здравствуйте, помогите решить проблему) анимация некоторых элементов не срабатывает. я так понимаю из за position relative у родителя. Это связанно offsetTop? как это исправить или чем заменить offsetTop?

[@maxgraph]

Я бы посмотрел в сторону intersection observer

[@mister_robot01]

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

[@maxgraph]

Расскажу

[@lastchancehider]

@@maxgraph лично я еще бы глянул примеры использования нативного js вместо gsap. Как в этом ролике, к примеру. (замена gsap scrollTrigger в 20ти минутном видео (: ) Контент топ, спасибо вам

[@konstantinkuznetsov4415]

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

[@maxgraph]

Убрать else в условии, чтобы класс не удалился

[@ЄваПустовойт]

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

[@maxgraph]

Прямо сегодня выйдет видео на эту тему))

[@ЄваПустовойт]

@@maxgraph ❤️👍🤗

[@imeewiz516]

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

[@maxgraph]

Можно вызвать анимацию не на скролл, а просто

[@imeewiz516]

@@maxgraphточно, спасибо!

[@РусланБогданов-ы8е]

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

[@maxgraph]

Не лучше, а одно из решений

[@РусланБогданов-ы8е]

@@maxgraph ну как же Если все это будет прописываться из скрипта то нагрузка будет на много больше ежели прописывалось бы сразу же из стилей

[@РусланБогданов-ы8е]

@@maxgraph ну может я ошибаюсь, я совсем новичок можно сказать ахах

[@АкмальАлимжонов]

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

[@Maxim9575]

А почему нет?

[@DeadStiks]

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

[@maxgraph]

Не понял, что именно не работает))

[@DeadStiks]

@MaxGraph - cайты как страсть Вместо hero.style.marginTop = '${header.offsetHeight}px' сразу выводится значение hero.style.marginTop = '0px' и не реагирует на прокрутку. И с многозадачной анимацией элементов scrollItems проблемы - сразу присваивается элементам класс animation-class и не реагирует на скролл страницы. Хотя вполне возможно, что я где-то накосячил, но вроде всё раз 10 перепроверил ничего не нашёл. Либо у Wordpress есть какие-то особенности. Я не силён в JS от слова совсем. Только по урокам и остаётся хоть как-то разнообразие на сайт вносить. 😄

[@maxgraph]

Где-то косячок в коде, не иначе)

[@DeadStiks]

@@maxgraph Ок. Понял. Спасибо. Значит буду дальше колупать код, есть смысл. ))

[@DeadStiks]

@MaxGraph - cайты как страсть Я явно чего-то не понимаю 😩 const paddingHeight = scrollItemsTop.offsetTop; //в консоле выводит 184px, прокрутка на значение не влияет - то, что нужно. scrollCont.style.paddingTop = '184px'; - пишешь так, всё работает. scrollCont.style.paddingTop = '${paddingHeight}px'; - а так не хочет, хотя разницы по идеи никакой нет. Так даже внутренний отступ в стиль блока не подгружает.😵‍💫 И здесь статически в CSS не задать, как писали в комментариях ниже, т.к. у каждой страницы это расстояние от верхнего края блока до верхней границы экрана будет своё и зависит от наполнения. Так, что отступы через JS штука нужная. 👍

[@denysmaksymuck]

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

[@maxgraph]

Так принято называть первый блок сайта

[@РоманСолнцев-х9э]

Это просто сделать. А как сделать анимацию объектов при скроллинге? Я имею ввиду такую анимацию: south-stream-transport.com

[@maxgraph]

scrollTrigger в GSAP, видимо)

[@РоманСолнцев-х9э]

@@maxgraph А можно как-то по другому сделать, а то очень сложно таким способом понять.

[@EvgenOl]

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

[@maxgraph]

Jq - лишняя нагрузка, лишние килобайты

[@EvgenOl]

@@maxgraph ага, только килобайта перестали экономить лет 20 назад. Клиент всё равно попросит подключить пять пикселей, чат, капчу и прочую хрень. QJ от этого добра 1% займёт. А вот время разработки сокращает кратно.

[@maxgraph]

Ничего подобного) как экономили, так и экономят

[@EvgenOl]

@@maxgraph у тебя ода жизнь. Чтобы сэкономить килобайт ты тратишь несколько минут жизни. Это невосполнимый ресурс. А браузер сэкономленный килобайт не заметит. JQ весит меньше чем фотка, что там экономить на спичках то? Лучше бы жизнь поэкономил. Но как знаешь...

[@maxgraph]

А я то причём тут😀😀