Анимация при прокрутке (скролле) страницы на HTML CSS и JavaScript
Рет қаралды 165,392
Күн бұрынАнимация при прокрутке (скролле) страницы очень полезно для повышения удобства пользования вашим сайтом. К тому же это очень красиво и современно. В этом видео я пошагово покажу как анимировать элементы при прокрутке страницы без тяжелых библиотек используя 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 3 жыл бұрын
🤟Полезно? 🔴 Получить доступ к плюшкам + поддержать канал: 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 3 жыл бұрын
Привет. Предлагаю тебе сделать видео о том, как использовать библиотеки правильно, то есть к примеру, вырезания функционала(чтобы она стала менее тяжеловесной). А то я заметил тенденцию твои подписчиков, что они считают что надо все писать с нуля. Надеюсь ты так не считаешь и сможешь объяснить им, что как самопис, так и библиотеки надо использовать разумно
@nitagas187 3 жыл бұрын
Фрилансер по жизни - IT и фриланс Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22
@user-je1xd6sd4s 3 жыл бұрын
@@nitagas187, либо вешаешь на body картинку и делаешь её фиксированной или в любое место добавляешь картинку делаешь её fixed. И zindex минус один допустим.
@user-je1xd6sd4s 3 жыл бұрын
Точнее не в любое место. А чтобы у этой картинки был лишь один родитель-body
@PupaLupaZ 3 жыл бұрын
Братишка, подскажи, что за расширение в VSCode со снипетами? Пахом с Епифаном спрашивают.
@user-nq5rk4np6e 2 жыл бұрын
Спасибо вам огромное, ваши видео кардинально меняют представление о, казалось бы, таких сложных моментах. Здорово, что вам пришла в голову снимать подобные ролики.
@DenisZagvozdin 3 жыл бұрын
Спасибо тебе за бесплатные и невероятно качественные уроки! Ты - один из немногих, кто показывает всё с нуля и на чистом JS. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время
@FreelancerLifeStyle 3 жыл бұрын
Хех, спасибо!
@timkabaltabaev6085 3 жыл бұрын
Очень помог, действительно было интересно узнать о реализации такой анимации без сторонних библиотек Все доступно, а самое главное - в последствии можно легко настроить анимацию по своему усмотрению
@elkhanhamet2561 3 жыл бұрын
Красавчик Женя!!! Я так долго искал урок по этой теме, и вы великолепно все разъяснили показали. Спасибо вам огромное.
@jasonborn4373 Жыл бұрын
Сморю этого человека уже почти год! Нету слов просто, низкий поклон! спасибо!
@user-en9dz9ow6u 3 жыл бұрын
Я:Только вчера задумался над такой анимацией на сайте. Жека: вот держи!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@blodorn7895 3 жыл бұрын
@@FreelancerLifeStyle это тебе спасибо, я пол инета перерыл в поисках решения)
@blodorn7895 3 жыл бұрын
@@FreelancerLifeStyle а самое главное, что обьясняешь не на древнеэльфийском, а на понятном языке) ты топчик!
@narekhayrapetyan5542 3 жыл бұрын
@@FreelancerLifeStyleвсем привет а почему анимация не работает на андроиде ?
@user-xr4rd3pm1v 3 жыл бұрын
Спасибо большое за такое подробное описание и коментирование кода! Всё работает))
@egoryurchenko7343 3 жыл бұрын
Как раз то что нужно мне сейчас для заказа) Спасибо! лайк
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@johndoe4016qweasd 3 жыл бұрын
Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы. Отдельно благодарю за качество монтажа, это просто нечто)
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@eduardsakulin8700 2 жыл бұрын
Жека, человечище с большой буквы. Разложил все по полкам. Очень годно. Спасибо ОГРОМНОЕ!!
@zmeygorynych5684 3 жыл бұрын
Сложный js простыми словами от Жеки) Спасибо, огромный вклад в наше образование)
@george_m641 3 жыл бұрын
Наконец-то!!! Всё время хотел понять как это работает, да всё руки не доходили.Спасибо большое!
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@user-um5vx4ez1p 3 жыл бұрын
Ура! Злободневный вопрос! Сейчас буду смотреть! Лайк поставил сразу 😜
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@aleksgbr3878 3 жыл бұрын
80к Жека, мои поздравления!))) Урок по скроллу супер полезный спасиб!!!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@koesh4696 2 жыл бұрын
Чем больше узнаю, тем больше понимаю что изучать и изучать ещё оооочень много! Спасибо Жека!
@anutasolnechnaya8297 3 жыл бұрын
Как мне нравится твой канал!!! Все понятно и очень нравится твой стиль преподавания!!!
@FreelancerLifeStyle 3 жыл бұрын
Я рад!
@abolnikov 3 жыл бұрын
Только наткнулся на это видео, видать колокольчик забыл. Но уже заинтриговало. Представляю как мои заготовки оживут после просмотра. Спасибо за такие вот видео. Очень полезно и помогает в развитии.
@bio.Minecraft 3 жыл бұрын
вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!
@FreelancerLifeStyle 3 жыл бұрын
Я рад! Пожалуйста!
@moi-nick-zanyat 2 жыл бұрын
просто огромное количество информации в одном ролике, обязательно навешаю ко всему)
@user-dt4lk6mf7n 3 жыл бұрын
Буквально каждое видео - невероятно годный контент. Не канал, а сокровище. Очень рад, что встретил его. Спасибо большое и удачи!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@alexles5003 3 жыл бұрын
Спасибо. Очень доходчиво объяснили механизм добавления такой анимации Мне лично не особо нравится когда на сайте все летает и ездит. Но любое желание заказчика... А благодаря вам мы знаем как это желание в жизнь воплотить.
@jusikXL 3 жыл бұрын
Очень нужная инфа, спасибо!
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@Shadow9402 3 жыл бұрын
Отличный урок, Женя, спасибо большое! Обучаюсь только по твоим видео 👍
@FreelancerLifeStyle 3 жыл бұрын
Я рад!
@xxFursiKxx 3 жыл бұрын
то, что я искала! Спасибо! тысяча плюсиков в карму)))
@user-bs2wu7sv9j 3 жыл бұрын
Спасибо за внятный и понятный урок. Жаль, так мало людей Вам поставили одобрительную оценку из тех, кто просмотрел видео (
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@thevalkk5301 3 жыл бұрын
Как всегда топ! Спасибо, Жека
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@dmitrid.317 3 жыл бұрын
Ай да Жека! Всегда умеет порадовать годнотой! Лайкос однозначно)
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@demendarkness5562 6 ай бұрын
Лучший! Спасибо! Только твои туторы адекватно работают с первого раза!
@anastasea9101 3 жыл бұрын
Женя, это огонь!! Спасибо!!
@xarex785 11 ай бұрын
Один из самых крутых каналов, очень много полезного. Спасибо большое!
@yuriybondaruyk1145 3 жыл бұрын
Спасибо! Как всегда - то, что нужно!)
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@user-vi3rc7jr3n 3 жыл бұрын
Женя, спасибо за видео! Супер!
@maksrygaev3900 3 жыл бұрын
Спасибо за скрипт Жека! Шикарный урок как всегда! Обнял
@user-tm4ih7wm2i Жыл бұрын
Огромное спасибо за годную информацию! Ваши видео помогают мне во многом!
@user-ch4gd5sb7z 3 жыл бұрын
Спасибо! Круто, как всегда 😉
@anastasiyaiko444 3 жыл бұрын
Супер, спасибо! Столько тонкостей показал.
@user-iy2hd6ix9j 3 жыл бұрын
Великолепно! Спасибо большое!
@TheFastmind 2 жыл бұрын
Спасибо. Искал везде материал и опять нашел то, что нужно у тебя)).
@shukonfadah5725 2 жыл бұрын
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
@TheMuxacb 3 жыл бұрын
Как же я ждал этого видео ))
@FreelancerLifeStyle 3 жыл бұрын
Хех, надеюсь полезное!)
@Sobanim 3 жыл бұрын
Как всегда всё супер!) Большое спасибо) Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется
@ye5275 3 жыл бұрын
Только увидела новое видео - сразу лайк, а потом уже смотреть.
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@elenarizhankova6316 2 жыл бұрын
Спасибо огромное!! всё по сути и понятно!
@xakxkux8381 3 жыл бұрын
невероятно полезное видео! благодарю за контент успехов
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@user-cl4nn5qc5k Жыл бұрын
Дякую, гарний приклад )) Дякую за твої труди)
@kotbarsik9613 3 жыл бұрын
Спасибо, полезное видео)
@anvar_music 2 жыл бұрын
Очень классно выглядит, правда понял только суть. Завтра попробую за видео повторить. Урок очень качественный. Лайк подписка.
@user-br2zc5sb6v 2 жыл бұрын
Спасибо за видосы, просто The Best!!
@tatigif7451 3 жыл бұрын
красавчик ))) спасибо за видосы !!!!
@user-kh9ed9jv5d 3 жыл бұрын
Благодарю!! Круто!!
@marinaermilova7912 3 жыл бұрын
Привет, еще как полезно и интересно. Спасибо большое.
@user-so7im7nx7s 3 жыл бұрын
Спасибо, пол дня убил чтобы найти как это сделать без библиотек. Обычно на ютубе ничего путного никогда не находил, но потеряв надежду что то найти решил написать, и нашел!
@felix9091 3 жыл бұрын
Спасибо большое!
@user-vx7ro1hs1h 3 жыл бұрын
Спасибо за ролик!
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@user-gi5in2xh2y 3 жыл бұрын
Круто, спасибо!
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@maxim7603 3 жыл бұрын
Спасибо, классное видео
@user-ut5ii2yu6o 2 жыл бұрын
Фрилансер, благодарю! Все получилось!!!
@user-zu6ei1dn6z 3 жыл бұрын
Максимально полезное видео!
@FreelancerLifeStyle 3 жыл бұрын
Я рад!
@andreyglavatskikh6403 2 жыл бұрын
Очень помогло, спасибо
@imma5330 3 жыл бұрын
Просто топчик!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@user-qm5xf8bc4w Жыл бұрын
Рома дуже дякую тобі за урок, черпаю спокій та рівновагу, дуже цінні знання. Мирного неба
@user-nb1is5wc4k Жыл бұрын
Спасибо! Не всё, конечно, понятно, но есть над чем поломать голову. Отличный урок!
@artikor8071 3 жыл бұрын
Полезная. Информация. Проверять я ее конечно же буду :D +идея для видео - блочный скроллинг (fullpage.js)
@spr1ng586 3 жыл бұрын
Только вчера искал как это сделать ничего не нашёл и сегодня ты делаешь такой подарок спс^
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@anastasiyaiko444 3 жыл бұрын
Супер!
@user-eb3yr9wc4k 3 жыл бұрын
Евгений огромное спасибо !!!!!
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@user-su1vo4wg2t 3 жыл бұрын
как всегда топовый контен!
@serhiipeksymov3739 3 жыл бұрын
Круто!💪
@FreelancerLifeStyle 3 жыл бұрын
СпасибО!
@stp9ua Жыл бұрын
видео наверное полезное для тех кто только начинает изучать фронт. Но даже в этом случае лучше бы сказать что так делать можно но не желательно. Потому что есть Intersection Observer API
@vladislavbondarenko5190 3 жыл бұрын
Жека спасибо за видос как всегда на высоте
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@yellowmind 3 жыл бұрын
Только посмотрел про параллакс, а тут и анимация появилась. Спасибо, Жека! очень пригодится 🤔
@FreelancerLifeStyle 3 жыл бұрын
Супер!
@Andrey_Mendel 2 жыл бұрын
Круто! Есть куда стремиться)) Видел такую анимацию у девушки веб-дизайнера на её сайте.
@Andrey_Mendel Жыл бұрын
Повернувся до відео - це коли ти вже розумієш, що пишеться в js - супер!
@iventeye 3 жыл бұрын
Спасибо, Жека! Давно хотел узнать как это можно делать без библиотек на чистом js и теперь буду использовать.
@FreelancerLifeStyle 3 жыл бұрын
Супер!
@user-je1xd6sd4s 3 жыл бұрын
Не рентабельно
@iventeye 3 жыл бұрын
@@user-je1xd6sd4s а что рентабельно?
@user-je1xd6sd4s 3 жыл бұрын
@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи
@user-je1xd6sd4s 3 жыл бұрын
В тех же библиотеках можно просто вырезать некую функциональность, которая вам не понадобится. За счёт этого уменьшится вес, плюс вы в большей степени защищены от багов, чем при разработке своего скрипта. Рекомендую использовать туже самую AOS. Вырезать все что вам не нужно и использовать. Зато вы будете уверены что все будет работать как надо
@user-fv1qs6ur2h 3 жыл бұрын
Спасибо ! )
@sonyachna_jul 2 жыл бұрын
Спасибо большое!)))
@FreelancerLifeStyle 2 жыл бұрын
Пожалуйста!
@user-qk9cb4mk2o 3 жыл бұрын
спасибо огромное, очень помог
@glebkabayjanov5646 3 жыл бұрын
Ну что сказать просто ЛУЧШИЙ !!!!!!!!!!!!!!!!!!!!!
@dmitrys5369 3 жыл бұрын
Женя, живи вечно! Ты сила!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@AyratMuxametov 3 жыл бұрын
Годный видос)
@user-gw6vn6vx8o 2 жыл бұрын
Спасибо!
@Atelier155 3 жыл бұрын
Спасибо большое
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@__-qk1jr 3 жыл бұрын
Дарова, Жека, спасибо за урок
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@nermers5029 3 жыл бұрын
Я уже обыскался, как сделать такую анимацию. Спасибо тебе огромное
@TheVer0n 3 жыл бұрын
ты очень крут) спасибо за урок
@FreelancerLifeStyle 3 жыл бұрын
Пожалуйста!
@walkingdolphin9513 2 жыл бұрын
очень нравятся видяшки, и все эти эффекты 😎😊🤩
@kulikboxx 3 жыл бұрын
Дай тобі Боже здоров'я, добрий чоловіче!!!
@FreelancerLifeStyle 3 жыл бұрын
Дякую!
@gros_chat_noir Жыл бұрын
Дякую! Очень полезный урок!
@alexkreyn386 3 жыл бұрын
Как всегда на высоте, вот только в силу обыденности уже лень писать подобные комментарии, ведь и без них и дураку все понятно) теперь ждём js ♥️♥️♥️
@FreelancerLifeStyle 3 жыл бұрын
JS уже скоро!
@gio2156 3 жыл бұрын
а я думал это сложно, думал всякие плагины нужно подключать, которые понять сложнее и гораздо дольше, и подключал, лол, даже не пытался написать все руками, спасибо Жека! за почти что год я на ютубе лучше тебя никого не нашел, ни на англоязычном ни на ру
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@diasoralbekov6465 3 жыл бұрын
видно как ты кайфуешь в конце от проделанной работы
@mikekuibyshev4848 3 жыл бұрын
Уже час сижу и не понимаю почему ошибка в консоле(
@user-vp5dm4cy5u 3 жыл бұрын
Ух, как актуально))
@FreelancerLifeStyle 3 жыл бұрын
Я рад!
@boris7258 3 жыл бұрын
Жека - топчик!)
@sethm5905 3 жыл бұрын
Крутяяяк!!!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@sethm5905 3 жыл бұрын
Жека ты крут!!! Все так вовремя))) как только подумал про это, так сразу у тебя видос.))
@user-qq9sz8xy6y 3 жыл бұрын
Как всегда все круто! Спасибо! вот вопрос, для вэб программирования нужно углубление в JS? или достаточно знать какую то базу? И будут ли уроки по JS?
@FreelancerLifeStyle 3 жыл бұрын
Для верстки базу, для программирования глубже. Уроки по JS будут!
@user-qq9sz8xy6y 3 жыл бұрын
@@FreelancerLifeStyle благодарю, будем ждать!
@JoSmith0 3 жыл бұрын
Wow! Контент как по заказу! +100500 лайков!
@FreelancerLifeStyle 3 жыл бұрын
Спасибо!
@user-tl5tr6ds3d 3 жыл бұрын
Видео супер
@BohdanVR666 3 жыл бұрын
Ура, новый выпуск "как это сделать" И ещё, на вашем сайте, в разделе transform есть спойлер matrix3d. Там 16 букв N в скобках. И они все не переходят на следующую строку. Поэтому в моб. версии сайта эти N, N... Не помещаются на всей ширине телефона. Тоесть просто нужно сделать так, чтобы они переходили на след. строку.
@BohdanVR666 3 жыл бұрын
Ну или просто написать три точки
@gritsienkooleg3447 2 жыл бұрын
Ого))
Фрілансер по життю
Рет қаралды 223 М.
Tips Workshop
Рет қаралды 17 МЛН
MaxGraph - cайты как страсть
Рет қаралды 29 М.
Pomazkov JS
Рет қаралды 253 М.
Фрілансер по життю
Рет қаралды 227 М.
Давай Попробуем: JavaScript
Рет қаралды 13 М.
HTML Practice - фриланс, web-разработка, нейросети
Рет қаралды 23 М.
Reactify | Frontend Разработка
Рет қаралды 8 М.
Фрілансер по життю
Рет қаралды 451 М.