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

Пожалуйста)

Спасибо)

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

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

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

Спасибо)

Спасибо)

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

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

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

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

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

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

Расскажу

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

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

Спасибо

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

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

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

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

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

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

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

А почему нет?

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

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

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

@@maxgraph ❤️👍🤗

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

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

@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 штука нужная. 👍

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

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

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

scrollTrigger в GSAP, видимо)

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

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

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

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

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

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