Анимация при прокрутке (скролле) страницы на HTML CSS и JavaScript

Анимация при прокрутке (скролле) страницы очень полезно для повышения удобства пользования вашим сайтом. К тому же это очень красиво и современно. В этом видео я пошагово покажу как анимировать элементы при прокрутке страницы без тяжелых библиотек используя HTML CSS и JavaScript.
👉Урок CSS Transition - • Все о CSS переходах (t...
👉Урок CSS Transform - • CSS transform. 2D и 3D...
👉 Для ленивых, архив с готовым кодом на патреоне - / 40076667
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
Содержание:
00:00 - Введение, подготовка к работе
01:21 - Настройка анимации в CSS
03:38 - Пишем JavaScript код
13:46 - Примеры применения анимаций при скролле
22:22 - Итоговый результат
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

🤟Полезно? 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@user-je1xd6sd4s]

Привет. Предлагаю тебе сделать видео о том, как использовать библиотеки правильно, то есть к примеру, вырезания функционала(чтобы она стала менее тяжеловесной). А то я заметил тенденцию твои подписчиков, что они считают что надо все писать с нуля. Надеюсь ты так не считаешь и сможешь объяснить им, что как самопис, так и библиотеки надо использовать разумно

[@nitagas187]

Фрилансер по жизни - IT и фриланс Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22

[@user-je1xd6sd4s]

@@nitagas187, либо вешаешь на body картинку и делаешь её фиксированной или в любое место добавляешь картинку делаешь её fixed. И zindex минус один допустим.

[@user-je1xd6sd4s]

Точнее не в любое место. А чтобы у этой картинки был лишь один родитель-body

[@PupaLupaZ]

Братишка, подскажи, что за расширение в VSCode со снипетами? Пахом с Епифаном спрашивают.

[@user-en9dz9ow6u]

Я:Только вчера задумался над такой анимацией на сайте. Жека: вот держи!

[@FreelancerLifeStyle]

Спасибо!

[@blodorn7895]

@@FreelancerLifeStyle это тебе спасибо, я пол инета перерыл в поисках решения)

[@blodorn7895]

@@FreelancerLifeStyle а самое главное, что обьясняешь не на древнеэльфийском, а на понятном языке) ты топчик!

[@narekhayrapetyan5542]

@@FreelancerLifeStyleвсем привет а почему анимация не работает на андроиде ?

[@DenisZagvozdin]

Спасибо тебе за бесплатные и невероятно качественные уроки! Ты - один из немногих, кто показывает всё с нуля и на чистом JS. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время

[@FreelancerLifeStyle]

Хех, спасибо!

[@user-nq5rk4np6e]

Спасибо вам огромное, ваши видео кардинально меняют представление о, казалось бы, таких сложных моментах. Здорово, что вам пришла в голову снимать подобные ролики.

[@zmeygorynych5684]

Сложный js простыми словами от Жеки) Спасибо, огромный вклад в наше образование)

[@egoryurchenko7343]

Как раз то что нужно мне сейчас для заказа) Спасибо! лайк

[@FreelancerLifeStyle]

Пожалуйста!

[@user-bs2wu7sv9j]

Спасибо за внятный и понятный урок. Жаль, так мало людей Вам поставили одобрительную оценку из тех, кто просмотрел видео (

[@FreelancerLifeStyle]

Пожалуйста!

[@johndoe4016qweasd]

Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы. Отдельно благодарю за качество монтажа, это просто нечто)

[@FreelancerLifeStyle]

Спасибо!

[@jasonborn4373]

Сморю этого человека уже почти год! Нету слов просто, низкий поклон! спасибо!

[@mikekuibyshev4848]

Уже час сижу и не понимаю почему ошибка в консоле(

[@elkhanhamet2561]

Красавчик Женя!!! Я так долго искал урок по этой теме, и вы великолепно все разъяснили показали. Спасибо вам огромное.

[@koesh4696]

Чем больше узнаю, тем больше понимаю что изучать и изучать ещё оооочень много! Спасибо Жека!

[@eduardsakulin8700]

Жека, человечище с большой буквы. Разложил все по полкам. Очень годно. Спасибо ОГРОМНОЕ!!

[@user-um5vx4ez1p]

Ура! Злободневный вопрос! Сейчас буду смотреть! Лайк поставил сразу 😜

[@FreelancerLifeStyle]

Спасибо!

[@timkabaltabaev6085]

Очень помог, действительно было интересно узнать о реализации такой анимации без сторонних библиотек Все доступно, а самое главное - в последствии можно легко настроить анимацию по своему усмотрению

[@bio.Minecraft]

вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!

[@FreelancerLifeStyle]

Я рад! Пожалуйста!

[@george_m641]

Наконец-то!!! Всё время хотел понять как это работает, да всё руки не доходили.Спасибо большое!

[@FreelancerLifeStyle]

Пожалуйста!

[@anutasolnechnaya8297]

Как мне нравится твой канал!!! Все понятно и очень нравится твой стиль преподавания!!!

[@FreelancerLifeStyle]

Я рад!

[@user-xr4rd3pm1v]

Спасибо большое за такое подробное описание и коментирование кода! Всё работает))

[@aleksgbr3878]

80к Жека, мои поздравления!))) Урок по скроллу супер полезный спасиб!!!

[@FreelancerLifeStyle]

Спасибо!

[@alexles5003]

Спасибо. Очень доходчиво объяснили механизм добавления такой анимации Мне лично не особо нравится когда на сайте все летает и ездит. Но любое желание заказчика... А благодаря вам мы знаем как это желание в жизнь воплотить.

[@xxFursiKxx]

то, что я искала! Спасибо! тысяча плюсиков в карму)))

[@abolnikov]

Только наткнулся на это видео, видать колокольчик забыл. Но уже заинтриговало. Представляю как мои заготовки оживут после просмотра. Спасибо за такие вот видео. Очень полезно и помогает в развитии.

[@Shadow9402]

Отличный урок, Женя, спасибо большое! Обучаюсь только по твоим видео 👍

[@FreelancerLifeStyle]

Я рад!

[@user-dt4lk6mf7n]

Буквально каждое видео - невероятно годный контент. Не канал, а сокровище. Очень рад, что встретил его. Спасибо большое и удачи!

[@FreelancerLifeStyle]

Спасибо!

[@moi-nick-zanyat]

просто огромное количество информации в одном ролике, обязательно навешаю ко всему)

[@jusikXL]

Очень нужная инфа, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@yuriybondaruyk1145]

Спасибо! Как всегда - то, что нужно!)

[@FreelancerLifeStyle]

Пожалуйста!

[@ye5275]

Только увидела новое видео - сразу лайк, а потом уже смотреть.

[@FreelancerLifeStyle]

Спасибо!

[@thevalkk5301]

Как всегда топ! Спасибо, Жека

[@FreelancerLifeStyle]

Пожалуйста!

[@anastasiyaiko444]

Супер, спасибо! Столько тонкостей показал.

[@TheFastmind]

Спасибо. Искал везде материал и опять нашел то, что нужно у тебя)).

[@xarex785]

Один из самых крутых каналов, очень много полезного. Спасибо большое!

[@demendarkness5562]

Лучший! Спасибо! Только твои туторы адекватно работают с первого раза!

[@user-tm4ih7wm2i]

Огромное спасибо за годную информацию! Ваши видео помогают мне во многом!

[@dmitrid.317]

Ай да Жека! Всегда умеет порадовать годнотой! Лайкос однозначно)

[@FreelancerLifeStyle]

Спасибо!

[@maksrygaev3900]

Спасибо за скрипт Жека! Шикарный урок как всегда! Обнял

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!

[@anastasea9101]

Женя, это огонь!! Спасибо!!

[@user-vi3rc7jr3n]

Женя, спасибо за видео! Супер!

[@user-ch4gd5sb7z]

Спасибо! Круто, как всегда 😉

[@user-gc2df1mn8v]

Спасибо за разбор, хотел уточнить - Вы не упоминаете про оптимизацию использования события scroll для того, чтобы не усложнять материал или на то есть другие причины? Я имею в виду throttling или requestAnimationFrame

[@user-so7im7nx7s]

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

[@Pavel-ge6lr]

Возможно кому-то поможет. У меня не работала анимация, потому что не заметил в самой первой строчке у себя ошибку: перед '_anim-items' должна стоять точка, либо должно быть написано div._anim-items

[@PeLmEn1236]

ААААААА часа два сидел искал ошибку, код переделывал. А всё дело было в точке)) спасибо!

[@Sobanim]

Как всегда всё супер!) Большое спасибо) Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется

[@amily-sky]

Как Вы делаете анимацию на сайтах? Используете ли animate.css и wow.js или делаете на чистом js? Актуально ли в 2021 использовать animate.css?

[@elenarizhankova6316]

Спасибо огромное!! всё по сути и понятно!

[@xakxkux8381]

невероятно полезное видео! благодарю за контент успехов

[@FreelancerLifeStyle]

Спасибо!

[@TheMuxacb]

Как же я ждал этого видео ))

[@FreelancerLifeStyle]

Хех, надеюсь полезное!)

[@user-qq9sz8xy6y]

Как всегда все круто! Спасибо! вот вопрос, для вэб программирования нужно углубление в JS? или достаточно знать какую то базу? И будут ли уроки по JS?

[@FreelancerLifeStyle]

Для верстки базу, для программирования глубже. Уроки по JS будут!

[@user-qq9sz8xy6y]

@@FreelancerLifeStyle благодарю, будем ждать!

[@user-iy2hd6ix9j]

Великолепно! Спасибо большое!

[@user-br2zc5sb6v]

Спасибо за видосы, просто The Best!!

[@iventeye]

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

[@FreelancerLifeStyle]

Супер!

[@user-je1xd6sd4s]

Не рентабельно

[@iventeye]

@@user-je1xd6sd4s а что рентабельно?

[@user-je1xd6sd4s]

@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи

[@user-je1xd6sd4s]

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

[@anvar_music]

Очень классно выглядит, правда понял только суть. Завтра попробую за видео повторить. Урок очень качественный. Лайк подписка.

[@user-cl4nn5qc5k]

Дякую, гарний приклад )) Дякую за твої труди)

[@marinaermilova7912]

Привет, еще как полезно и интересно. Спасибо большое.

[@user-ut5ii2yu6o]

Фрилансер, благодарю! Все получилось!!!

[@user-yn7sn7tz3m]

Привет) А на сколько актуально сейчас использовать Intersection Observer для отслеживания появления элемента на экране? Мне кажется, что сейчас Intersection Observer API имеет достаточную поддержку, что бы об этом думаешь?

[@user-nb1is5wc4k]

Спасибо! Не всё, конечно, понятно, но есть над чем поломать голову. Отличный урок!

[@kulikboxx]

Дай тобі Боже здоров'я, добрий чоловіче!!!

[@FreelancerLifeStyle]

Дякую!

[@spr1ng586]

Только вчера искал как это сделать ничего не нашёл и сегодня ты делаешь такой подарок спс^

[@FreelancerLifeStyle]

Пожалуйста!

[@yellowmind]

Только посмотрел про параллакс, а тут и анимация появилась. Спасибо, Жека! очень пригодится 🤔

[@FreelancerLifeStyle]

Супер!

[@dmitrys5369]

Женя, живи вечно! Ты сила!

[@FreelancerLifeStyle]

Спасибо!

[@hypnoZzzable]

Привет, Жэка! Крутой урок, как раз для заказа прямо сейчас нужен. Однако, возникла проблема. На некоторые элементы анимация сильно запаздывает. Пробовал увеличивать значение animStart, не помогает... В чем может быть проблема, подскажи?

[@nermers5029]

Я уже обыскался, как сделать такую анимацию. Спасибо тебе огромное

[@user-zu6ei1dn6z]

Максимально полезное видео!

[@FreelancerLifeStyle]

Я рад!

[@user-qm5xf8bc4w]

Рома дуже дякую тобі за урок, черпаю спокій та рівновагу, дуже цінні знання. Мирного неба

[@kotbarsik9613]

Спасибо, полезное видео)

[@user-kx5vg9kv8p]

Большое спасибо! а где можно находить объекты, свойства, методы и т.д.?

[@stp9ua]

видео наверное полезное для тех кто только начинает изучать фронт. Но даже в этом случае лучше бы сказать что так делать можно но не желательно. Потому что есть Intersection Observer API

[@gio2156]

а я думал это сложно, думал всякие плагины нужно подключать, которые понять сложнее и гораздо дольше, и подключал, лол, даже не пытался написать все руками, спасибо Жека! за почти что год я на ютубе лучше тебя никого не нашел, ни на англоязычном ни на ру

[@FreelancerLifeStyle]

Спасибо!

[@user-vx7ro1hs1h]

Спасибо за ролик!

[@FreelancerLifeStyle]

Пожалуйста!

[@tatigif7451]

красавчик ))) спасибо за видосы !!!!

[@felix9091]

Спасибо большое!

[@vladislavbondarenko5190]

Жека спасибо за видос как всегда на высоте

[@FreelancerLifeStyle]

Пожалуйста!

[@diasoralbekov6465]

видно как ты кайфуешь в конце от проделанной работы

[@artikor8071]

Полезная. Информация. Проверять я ее конечно же буду :D +идея для видео - блочный скроллинг (fullpage.js)

[@SuperRAilya]

8:46 11:54 не анимировать когда скролишь вверх 13:30 анимация текста при скроле 15:39 17:33 анимация изображения + текст 19:32 поочередное появление (комментарий для себя)

[@user-eb3yr9wc4k]

Евгений огромное спасибо !!!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@vladbash1]

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

[@yuriiya7752]

Есть видео (или будет ли) про те же фичи только через jQuery?

[@Andrey_Mendel]

Круто! Есть куда стремиться)) Видел такую анимацию у девушки веб-дизайнера на её сайте.

[@Andrey_Mendel]

Повернувся до відео - це коли ти вже розумієш, що пишеться в js - супер!

[@user-gi5in2xh2y]

Круто, спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@maxim7603]

Спасибо, классное видео

[@user-kh9ed9jv5d]

Благодарю!! Круто!!

[@andreyglavatskikh6403]

Очень помогло, спасибо

[@alexr6829]

Женя, что по поводу Intersection Observer API? Не проще ли будет через инстанс обозревателя сделать все манипуляции?

[@FreelancerLifeStyle]

Не везде работать будет но показать способ стоит, спасибо!

[@walkingdolphin9513]

очень нравятся видяшки, и все эти эффекты 😎😊🤩

[@vadim9965]

Жека, уроки - пушка!)) Скажи пожалуйста, как ты динамически обновляешь браузер при верстке, что изменения видны сразу же?

[@vadim9965]

А все, нашел, кому надо - kzbin.info/www/bejne/qaWpgKxmg9SUnsk&feature=emb_rel_end

[@FreelancerLifeStyle]

Спасибо!

[@solomon8540]

Лёха, привет. Нужен совет, стоит ли учить Bootstrap или и гриды сойдут. Вроде и нативный CSS (+SCSS) пойдёт для эффективной работы, но читал что Бутс покрывает 80% задач. Так ли это?

[@phat80]

Кто такой Лёха? 😂

[@phat80]

Bootstrap покрывает 99% задач в современном сайтостроении. А использовать его или нет - это личные предпочтения каждого. 5ю версию я бы рассмотрел, 4я на хрен не нужна, так как тянет с собой и jQuery.

[@alexkreyn386]

Как всегда на высоте, вот только в силу обыденности уже лень писать подобные комментарии, ведь и без них и дураку все понятно) теперь ждём js ♥️♥️♥️

[@FreelancerLifeStyle]

JS уже скоро!

[@TheVer0n]

ты очень крут) спасибо за урок

[@FreelancerLifeStyle]

Пожалуйста!

[@khalilmutallibov]

Большое спасибо, только вы можете пожалуйста в описании оставить файл с javascript-кодом? У меня ошибку выдает, хотя все правильно написал.

[@isok.atyrau]

Как всегда все супер!!! Жека братан этот пример я могу найти в гитхабе??? Хочется видеть код виде локального репозитория, понять как делать такие анимации, проэксперементировать)))

[@imma5330]

Просто топчик!

[@FreelancerLifeStyle]

Спасибо!

[@user-su1vo4wg2t]

как всегда топовый контен!

[@blodorn7895]

есть вопрос: А если добавить условие с no-hide через "}else if{ " , это нормальное решение?

[@TheMuxacb]

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

[@glebkabayjanov5646]

Ну что сказать просто ЛУЧШИЙ !!!!!!!!!!!!!!!!!!!!!

[@user-qk9cb4mk2o]

спасибо огромное, очень помог