1:45 Господи, как же мне сильно нужна была эта анимация, но никак её не мог найти! Спасибо вам огромное!!!😮😮😮😁😁😁 Продолжайте снимать в том же духе!!!🎉😁😁
Максим, спасибо огромное за это видео, попалось как нельзя кстати! Я не видела продолжения, еще нет на канале? И еще раз спасибо, твои видео уже не раз меня спасали
У функции, добавляющей класс animation-class есть очень интересный баг точнее это даже не баг, а просто особенность метода offsetTop. Если прописать position:relativе родительскому контейнеру, в котором содержатся элементы с классом scroll-item, то при попытке скролла им сразу присвоится animation. вот такие дела, вместо offsetTop можно вариант с getBoundingClientRect нарисовать.
@@Вселучшеедетям-ы7м Я уже точно не помню, один из вариантов это использовать getBoundingClientRect, второй вариант это поменять стили, третий вариант взять offsetTop до нужного блока, потом получить его высоту и уже исходя из этой высоты прописывать анимацию при скроле для элементов.
Отличное видео, но мне кажется, что не хватает хотя бы базового напоминания о производительности. На скролл можно повесить очень тяжёлую функцию с большой перерисовкой и сайт превратится в тыкву. В будущем видео отлично было бы затронуть эту тему
+ Сталкиваясь с этим вопрос все упускают важный момент - производительность. Добавляя допустим какой-нибудь цикл в обработчик scroll, означает, что каждый раз при скролле это будет запускаться очень много раз, тем самым влияя на производительность. И на это очень мало информации, и почему-то всеми игнорируется.
@@maxgraph лично я еще бы глянул примеры использования нативного js вместо gsap. Как в этом ролике, к примеру. (замена gsap scrollTrigger в 20ти минутном видео (: ) Контент топ, спасибо вам
Максим здравствуйте, помогите решить проблему) анимация некоторых элементов не срабатывает. я так понимаю из за position relative у родителя. Это связанно offsetTop? как это исправить или чем заменить offsetTop?
Очень круто! Я для себя еще добавил дата атрибут, если он есть, то анимация проигруется лишь раз, если нету, то повторяется при скролле обратно, как на видео. Ты обычно используешь именно что-то свое для анимации, или подключаешь стороннее?
А как сделать, чтобы при загрузке страницы, анимация первого блока срабатывала автоматически? А то когда пользователь условно заходит на страницу сайта, необходимо проскролить немного вниз, чтобы началась анимация у объектов первого блока. Получается не очень красиво(
Спасибо за полезное видео. А как сделать, чтобы анимация срабатывала только один раз. То есть при повторном скроле просмотренного участка она не срабатывала?
Видео интересное! Так держать! У меня тут один вопрос есть. У меня есть фиксированная шапка. Как сделать так, чтобы шапка исчезала при скролле вниз а когда вверх - появилась снова? Коды, которые находила в интернете, не работали😢 А я новичок и не понимаю в чём проблема
Так всё отлично и понятно, но вот часть функций не работает и всё тут. С margin на самом деле полезное решение, т.к. в стилях не всегда получается его прописать, особенно когда речь идёт об относительных величинах, которые могут меняться в зависимости от объёма контента. Но эта зараза не хочет выводить переменные значения, выводит лишь постоянные, типа '80px' или 'unset', а высчитывать что-то отказывается. Рад, что хоть с шапкой сайта проблем нет. )))
@MaxGraph - cайты как страсть Вместо hero.style.marginTop = '${header.offsetHeight}px' сразу выводится значение hero.style.marginTop = '0px' и не реагирует на прокрутку. И с многозадачной анимацией элементов scrollItems проблемы - сразу присваивается элементам класс animation-class и не реагирует на скролл страницы. Хотя вполне возможно, что я где-то накосячил, но вроде всё раз 10 перепроверил ничего не нашёл. Либо у Wordpress есть какие-то особенности. Я не силён в JS от слова совсем. Только по урокам и остаётся хоть как-то разнообразие на сайт вносить. 😄
@MaxGraph - cайты как страсть Я явно чего-то не понимаю 😩 const paddingHeight = scrollItemsTop.offsetTop; //в консоле выводит 184px, прокрутка на значение не влияет - то, что нужно. scrollCont.style.paddingTop = '184px'; - пишешь так, всё работает. scrollCont.style.paddingTop = '${paddingHeight}px'; - а так не хочет, хотя разницы по идеи никакой нет. Так даже внутренний отступ в стиль блока не подгружает.😵💫 И здесь статически в CSS не задать, как писали в комментариях ниже, т.к. у каждой страницы это расстояние от верхнего края блока до верхней границы экрана будет своё и зависит от наполнения. Так, что отступы через JS штука нужная. 👍
Вот не пойму зачем так много писать и так долго на ванильном js если всё то-же самое на jq делается в 2 строки. Хотя наверное для урока и лучшего понимания материала оно и надо. Но для работы мало применимо, когда у тебя сроки и нет времени писать это всё каждый раз ради элементарных эффектов.
@@maxgraph ага, только килобайта перестали экономить лет 20 назад. Клиент всё равно попросит подключить пять пикселей, чат, капчу и прочую хрень. QJ от этого добра 1% займёт. А вот время разработки сокращает кратно.
@@maxgraph у тебя ода жизнь. Чтобы сэкономить килобайт ты тратишь несколько минут жизни. Это невосполнимый ресурс. А браузер сэкономленный килобайт не заметит. JQ весит меньше чем фотка, что там экономить на спичках то? Лучше бы жизнь поэкономил. Но как знаешь...
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 1](http://i.ytimg.com/vi/mV5bGIswTtQ/mqdefault.jpg)
гениальность - это когда ты повторяешь весь код и он не работает и только с третей попытки ты понимаешь что просто не подключила скрипт. Браво
Мах спасибо , всегда радуете начинающих кодеров!
Пожалуйста)
супер урок,спасибо
как не хватало таких разборов,я новичёк в js и эти уроки визуализируют прочитанную теорию
успехов!
Спасибо)
@@maxgraph у вас отличная подача,есть в планах сделались подробный гайд по оптимизации скорости wp,это было бы очень полезно и интересно
Топовый контент! Спасибо!
Мое почтение 👍
Полезное видео! Спасибо! Отличный канал))
Спасибо за отличное решение
1:45 Господи, как же мне сильно нужна была эта анимация, но никак её не мог найти! Спасибо вам огромное!!!😮😮😮😁😁😁 Продолжайте снимать в том же духе!!!🎉😁😁
используй IntersectionObsrverAPI вместо скролла
Помогло, спасибо!
Спасибо за уроки. Скажите, почему может animation-class сразу присваиваться, никаких изменений не происходит при скролле?
пошёл пробовать
Все как всегда, четко и полезно! Но скрол ведь событие которое вызывается миллион раз, intersection observer как вариант
Да, как вариант)
Классный урок, все доходчиво)) Только вместо все у нас будет хорошо, хотелось бы слышать что будет делать код))) А так всё очень понравилось!
Спасибо)
Максим, спасибо огромное за это видео, попалось как нельзя кстати! Я не видела продолжения, еще нет на канале? И еще раз спасибо, твои видео уже не раз меня спасали
Продолжение было) анимация плагином
Отличное видео 👍 Всё доступно и понятно, буду экспериментировать 😊 Продвижения каналу 😉
Спасибо)
А это хорошая идея для небольшого плагина :)
Это база для любого сайта.
У функции, добавляющей класс animation-class есть очень интересный баг точнее это даже не баг, а просто особенность метода offsetTop. Если прописать position:relativе родительскому контейнеру, в котором содержатся элементы с классом scroll-item, то при попытке скролла им сразу присвоится animation. вот такие дела, вместо offsetTop можно вариант с getBoundingClientRect нарисовать.
Здравствуйте в двух проектах такой баг, не подскажите как исправить )
@@Вселучшеедетям-ы7м Я уже точно не помню, один из вариантов это использовать getBoundingClientRect, второй вариант это поменять стили, третий вариант взять offsetTop до нужного блока, потом получить его высоту и уже исходя из этой высоты прописывать анимацию при скроле для элементов.
вот бы gsap на этот канал. Чумовая штука
Есть уже несколько)
снимите, пожалуйста, видео про анимацию при скролле на jquery. Анимацию сделала по вашему уроку, но она не работает в Таплинке.
Вряд ли на канале будет что-то по jq, извините)
Отличное видео, но мне кажется, что не хватает хотя бы базового напоминания о производительности. На скролл можно повесить очень тяжёлую функцию с большой перерисовкой и сайт превратится в тыкву. В будущем видео отлично было бы затронуть эту тему
+
Сталкиваясь с этим вопрос все упускают важный момент - производительность. Добавляя допустим какой-нибудь цикл в обработчик scroll, означает, что каждый раз при скролле это будет запускаться очень много раз, тем самым влияя на производительность.
И на это очень мало информации, и почему-то всеми игнорируется.
хорошее, полезное видео. расскажи о горизонтальной анимации как в конце видео.
Спасибо
хотелось бы послушать про Gsap, а точнее про ScrollTrigger и что-то тяжелее чем простые фишки
Уже есть кое что на канале
Может вы расскажете про библиотеку GSAP ? Например сделать какую то крутую анимацию с ним)
Расскажу
@@maxgraph лично я еще бы глянул примеры использования нативного js вместо gsap. Как в этом ролике, к примеру. (замена gsap scrollTrigger в 20ти минутном видео (: )
Контент топ, спасибо вам
Здравствуйте! А когда будет Js, вроде хотели делать!? Отдельное спасибо за полезный и качественный контент!
Здравствуйте, делаю. Хочу сперва все сделать, потом выкладывать)
Через месяц-два будет
@@maxgraph понял. Ждём) Спасибо
Thanks a lot
Максим здравствуйте, помогите решить проблему) анимация некоторых элементов не срабатывает. я так понимаю из за position relative у родителя. Это связанно offsetTop? как это исправить или чем заменить offsetTop?
Я бы посмотрел в сторону intersection observer
Очень круто! Я для себя еще добавил дата атрибут, если он есть, то анимация проигруется лишь раз, если нету, то повторяется при скролле обратно, как на видео. Ты обычно используешь именно что-то свое для анимации, или подключаешь стороннее?
Да по-разному. Могу и greensock подключить
не могу понять, а в чём разница анимации через keyframes или просто через транзишены? просто удобством ?
Кейфреймы можно вызывать без событий (наведение и тд)
А как сделать, чтобы при загрузке страницы, анимация первого блока срабатывала автоматически? А то когда пользователь условно заходит на страницу сайта, необходимо проскролить немного вниз, чтобы началась анимация у объектов первого блока. Получается не очень красиво(
Можно вызвать анимацию не на скролл, а просто
@@maxgraphточно, спасибо!
Спасибо за полезное видео. А как сделать, чтобы анимация срабатывала только один раз. То есть при повторном скроле просмотренного участка она не срабатывала?
Убрать else в условии, чтобы класс не удалился
Видео интересное! Так держать! У меня тут один вопрос есть. У меня есть фиксированная шапка. Как сделать так, чтобы шапка исчезала при скролле вниз а когда вверх - появилась снова? Коды, которые находила в интернете, не работали😢 А я новичок и не понимаю в чём проблема
Прямо сегодня выйдет видео на эту тему))
@@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 штука нужная. 👍
Здравствуйте, можно ли использовать этот код в react.js??
А почему нет?
Зачем в скрипте задавать маргин для отступа за навигацией? Не лучше ли будет сделать навигацию абсолютной и отступ задать заранее в стилях уже
Не лучше, а одно из решений
@@maxgraph ну как же
Если все это будет прописываться из скрипта то нагрузка будет на много больше ежели прописывалось бы сразу же из стилей
@@maxgraph ну может я ошибаюсь, я совсем новичок можно сказать ахах
Что означает название переменой hero?
Так принято называть первый блок сайта
Это просто сделать. А как сделать анимацию объектов при скроллинге? Я имею ввиду такую анимацию: south-stream-transport.com
scrollTrigger в GSAP, видимо)
@@maxgraph А можно как-то по другому сделать, а то очень сложно таким способом понять.
Вот не пойму зачем так много писать и так долго на ванильном js если всё то-же самое на jq делается в 2 строки. Хотя наверное для урока и лучшего понимания материала оно и надо. Но для работы мало применимо, когда у тебя сроки и нет времени писать это всё каждый раз ради элементарных эффектов.
Jq - лишняя нагрузка, лишние килобайты
@@maxgraph ага, только килобайта перестали экономить лет 20 назад. Клиент всё равно попросит подключить пять пикселей, чат, капчу и прочую хрень. QJ от этого добра 1% займёт. А вот время разработки сокращает кратно.
Ничего подобного) как экономили, так и экономят
@@maxgraph у тебя ода жизнь. Чтобы сэкономить килобайт ты тратишь несколько минут жизни. Это невосполнимый ресурс. А браузер сэкономленный килобайт не заметит. JQ весит меньше чем фотка, что там экономить на спичках то? Лучше бы жизнь поэкономил. Но как знаешь...
А я то причём тут😀😀