Появление элементов при скролле - Проще простого!

❓ Как сделать анимацию при скролле?
❓ Как сделать так, чтобы элементы появлялись при прокрутке страницы?
✅ В этом видео я расскажу, как сделать появление контента при скроллинге страницы.

🙋‍♂️ Меня зовут Владимир Самойлов.

#анимация #скролл #js #css

[sxbeigg]

0% воды, 100% информации, спасибо ты лучший!

[candyman]

Просто вставим код JS)
Вообще-то это самое сложное, жаль что не разобрали его(

[_Fantom_.]

Спасибо за лайфхак! Думал, что это будет труднее реализовать без js-библиотеки!

[zlatanibra]

прикольно, не знал, что так можно было. особенно понравилось, как фотка появляется.

[chgyrqw]

Спасибо большое! Очень интересное и полезное видео!

[london]

Спасибо большое за урок. Продолжайте дальше пожалуйста, у вас получается хорошо. Жаль что без подробностей, но со скилами когда человек, это уже не трудно догадаться что где самому

[sergpenskiu]

все равно это сложно для меня) буду дальше работать на заводе

[michaelkamko]

Очень полезно, универсально и просто. То, что я искал. Лайк и подписка.

[igetout]

Огонь, спасибо, за 4 минуты столько всего полезного)) Респект)

[ivanmikhailovich]

Спасибо, именно то, что и хотел, хочу чистый JS не хочу библиотеки!)

[michaelkamko]

Привет из будущего! Сейчас часть из этого это делается парой строк в css без дополнительной нагрузки.
А из js тут и сейчас много полезного. Например, добавление класса при скролле. Спасибо)

[happyman]

Как сделать чтобы при скроле вниз шапка сайта менялась на другую а вверх возвращалась предыдущая?

[Shiba_dub]

вставил, на одном блоке работает, как на другие блоки добавить?

[piggychampion]

Мерцают анимированные блоки. Если темный фон поставите, видно будет

[crocxzq]

привет не подскажите пожалуйста как сделать задержку появления ?
заранее спасибо!

[ketrinka]

Можно ли как-то это применить для готовых блоков, если сайт разработан с помощью визуального редактора?

[cmbkgoy]

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

[andreyalifanov]

Спасибо. И не надо никаких плагинов дополнительно ставить. Но нужно бы еще, чтобы не просто класс убирался, а убирался только при скролле обратно вверх. Как можно это сделать? Сейчас элементы удаляются, когда пропадают из видимости. Нужно, чтобы они исчезали только при скролле вверх, а вниз - оставались. Спасибо за ответ

[hdnihkt]

Владимир, а как быть если на одной странице два подобных кода? Поставила ваша код в таплинк для одного блока все нормально работает. Поставила новый блок html с этим же кодом естественно переменные поменяла не работает (видимо скрипт не отрабатывался), случайно поменяла расположение фигурных скобок в скрипте в else и заработал. Понимаю, что так не должно быть. Вопрос: как быть, если у меня есть три блока в разных местах страницы таплинка, к которым нужно применить появление. Если добавлять три одинаковых кода со своими переменными, получается, что работает только один. Буду благодарна за ответ)

[noutnoti]

Привет! У меня проблема. У меня есть сайт где есть фиксированый хедер. Добавил твой код для анимации, и когда я скролю страницу то елемент который анимируется ставится выше по оси z. z-index не помагает