Анимация при прокрутке (скролле) страницы на HTML CSS и JavaScript
ฝัง
- เผยแพร่เมื่อ 24 มิ.ย. 2024
- Анимация при прокрутке (скролле) страницы очень полезно для повышения удобства пользования вашим сайтом. К тому же это очень красиво и современно. В этом видео я пошагово покажу как анимировать элементы при прокрутке страницы без тяжелых библиотек используя 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
🤟 Живи, а работай в свободное время! ©
🤟Полезно?
🔴 Получить доступ к плюшкам + поддержать канал: 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
Привет. Предлагаю тебе сделать видео о том, как использовать библиотеки правильно, то есть к примеру, вырезания функционала(чтобы она стала менее тяжеловесной). А то я заметил тенденцию твои подписчиков, что они считают что надо все писать с нуля. Надеюсь ты так не считаешь и сможешь объяснить им, что как самопис, так и библиотеки надо использовать разумно
Фрилансер по жизни - IT и фриланс Подскажи пожалуйста как сделать чтобы фон оставался на месте и при скролле страницы тексты, каждый текст со своим фоном прокручивался на верх как тут 0:22
@@nitagas187, либо вешаешь на body картинку и делаешь её фиксированной или в любое место добавляешь картинку делаешь её fixed. И zindex минус один допустим.
Точнее не в любое место. А чтобы у этой картинки был лишь один родитель-body
Братишка, подскажи, что за расширение в VSCode со снипетами? Пахом с Епифаном спрашивают.
Спасибо вам огромное, ваши видео кардинально меняют представление о, казалось бы, таких сложных моментах. Здорово, что вам пришла в голову снимать подобные ролики.
Сморю этого человека уже почти год! Нету слов просто,
низкий поклон! спасибо!
Спасибо большое за такое подробное описание и коментирование кода!
Всё работает))
Как раз то что нужно мне сейчас для заказа) Спасибо! лайк
Пожалуйста!
Чем больше узнаю, тем больше понимаю что изучать и изучать ещё оооочень много! Спасибо Жека!
Жека, человечище с большой буквы. Разложил все по полкам. Очень годно. Спасибо ОГРОМНОЕ!!
Я:Только вчера задумался над такой анимацией на сайте.
Жека: вот держи!
Спасибо!
@@FreelancerLifeStyle это тебе спасибо, я пол инета перерыл в поисках решения)
@@FreelancerLifeStyle а самое главное, что обьясняешь не на древнеэльфийском, а на понятном языке)
ты топчик!
@@FreelancerLifeStyleвсем привет а почему анимация не работает на андроиде ?
Очень помог, действительно было интересно узнать о реализации такой анимации без сторонних библиотек
Все доступно, а самое главное - в последствии можно легко настроить анимацию по своему усмотрению
просто огромное количество информации в одном ролике, обязательно навешаю ко всему)
Красавчик Женя!!! Я так долго искал урок по этой теме, и вы великолепно все разъяснили показали. Спасибо вам огромное.
Очень нужная инфа, спасибо!
Пожалуйста!
Ура! Злободневный вопрос! Сейчас буду смотреть! Лайк поставил сразу 😜
Спасибо!
то, что я искала! Спасибо! тысяча плюсиков в карму)))
Наконец-то!!! Всё время хотел понять как это работает, да всё руки не доходили.Спасибо большое!
Пожалуйста!
Только наткнулся на это видео, видать колокольчик забыл. Но уже заинтриговало. Представляю как мои заготовки оживут после просмотра. Спасибо за такие вот видео. Очень полезно и помогает в развитии.
Сложный js простыми словами от Жеки) Спасибо, огромный вклад в наше образование)
Как мне нравится твой канал!!! Все понятно и очень нравится твой стиль преподавания!!!
Я рад!
Лучший! Спасибо! Только твои туторы адекватно работают с первого раза!
Женя, это огонь!! Спасибо!!
Спасибо!
Как всегда - то, что нужно!)
Пожалуйста!
Женя, спасибо за видео! Супер!
Супер, спасибо! Столько тонкостей показал.
Как всегда топ! Спасибо, Жека
Пожалуйста!
Один из самых крутых каналов, очень много полезного. Спасибо большое!
80к Жека, мои поздравления!))) Урок по скроллу супер полезный спасиб!!!
Спасибо!
Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы.
Отдельно благодарю за качество монтажа, это просто нечто)
Спасибо!
Спасибо тебе за бесплатные и невероятно качественные уроки! Ты - один из немногих, кто показывает всё с нуля и на чистом JS. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время
Хех, спасибо!
Отличный урок, Женя, спасибо большое! Обучаюсь только по твоим видео 👍
Я рад!
Спасибо. Искал везде материал и опять нашел то, что нужно у тебя)).
Дякую, гарний приклад ))
Дякую за твої труди)
Как же я ждал этого видео ))
Хех, надеюсь полезное!)
Спасибо. Очень доходчиво объяснили механизм добавления такой анимации
Мне лично не особо нравится когда на сайте все летает и ездит. Но любое желание заказчика... А благодаря вам мы знаем как это желание в жизнь воплотить.
Огромное спасибо за годную информацию! Ваши видео помогают мне во многом!
Ай да Жека! Всегда умеет порадовать годнотой! Лайкос однозначно)
Спасибо!
Спасибо за скрипт Жека! Шикарный урок как всегда! Обнял
Спасибо! Круто, как всегда 😉
вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!
Я рад! Пожалуйста!
Только увидела новое видео - сразу лайк, а потом уже смотреть.
Спасибо!
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
Спасибо за внятный и понятный урок. Жаль, так мало людей Вам поставили одобрительную оценку из тех, кто просмотрел видео (
Пожалуйста!
Великолепно! Спасибо большое!
Спасибо огромное!! всё по сути и понятно!
невероятно полезное видео!
благодарю за контент
успехов
Спасибо!
Буквально каждое видео - невероятно годный контент. Не канал, а сокровище. Очень рад, что встретил его. Спасибо большое и удачи!
Спасибо!
Спасибо за видосы, просто The Best!!
Фрилансер, благодарю! Все получилось!!!
Привет, еще как полезно и интересно. Спасибо большое.
Спасибо, пол дня убил чтобы найти как это сделать без библиотек. Обычно на ютубе ничего путного никогда не находил, но потеряв надежду что то найти решил написать, и нашел!
Максимально полезное видео!
Я рад!
красавчик ))) спасибо за видосы !!!!
Очень классно выглядит, правда понял только суть. Завтра попробую за видео повторить. Урок очень качественный. Лайк подписка.
Рома дуже дякую тобі за урок, черпаю спокій та рівновагу, дуже цінні знання. Мирного неба
Спасибо, полезное видео)
Ну что сказать просто ЛУЧШИЙ !!!!!!!!!!!!!!!!!!!!!
Благодарю!! Круто!!
Спасибо! Не всё, конечно, понятно, но есть над чем поломать голову. Отличный урок!
Спасибо за ролик!
Пожалуйста!
Как всегда всё супер!) Большое спасибо)
Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется
Евгений огромное спасибо !!!!!
Пожалуйста!
Просто топчик!
Спасибо!
видео наверное полезное для тех кто только начинает изучать фронт.
Но даже в этом случае лучше бы сказать что так делать можно но не желательно.
Потому что есть Intersection Observer API
как всегда топовый контен!
Спасибо, классное видео
Круто! Есть куда стремиться)) Видел такую анимацию у девушки веб-дизайнера на её сайте.
Повернувся до відео - це коли ти вже розумієш, що пишеться в js - супер!
Полезная. Информация. Проверять я ее конечно же буду :D
+идея для видео - блочный скроллинг (fullpage.js)
Круто, спасибо!
Пожалуйста!
Круто!💪
СпасибО!
Женя, живи вечно! Ты сила!
Спасибо!
Супер!
Очень помогло, спасибо
Годный видос)
Жека спасибо за видос как всегда на высоте
Пожалуйста!
Спасибо, Жека! Давно хотел узнать как это можно делать без библиотек на чистом js и теперь буду использовать.
Супер!
Не рентабельно
@@user-je1xd6sd4s а что рентабельно?
@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи
В тех же библиотеках можно просто вырезать некую функциональность, которая вам не понадобится. За счёт этого уменьшится вес, плюс вы в большей степени защищены от багов, чем при разработке своего скрипта. Рекомендую использовать туже самую AOS. Вырезать все что вам не нужно и использовать. Зато вы будете уверены что все будет работать как надо
видно как ты кайфуешь в конце от проделанной работы
Спасибо большое!
а я думал это сложно, думал всякие плагины нужно подключать, которые понять сложнее и гораздо дольше, и подключал, лол, даже не пытался написать все руками, спасибо Жека! за почти что год я на ютубе лучше тебя никого не нашел, ни на англоязычном ни на ру
Спасибо!
очень нравятся видяшки, и все эти эффекты 😎😊🤩
Дякую! Очень полезный урок!
Только вчера искал как это сделать ничего не нашёл и сегодня ты делаешь такой подарок спс^
Пожалуйста!
Спасибо большое!)))
Пожалуйста!
ты очень крут) спасибо за урок
Пожалуйста!
Только посмотрел про параллакс, а тут и анимация появилась. Спасибо, Жека! очень пригодится 🤔
Супер!
Дарова, Жека, спасибо за урок
Пожалуйста!
спасибо огромное, очень помог
Я уже обыскался, как сделать такую анимацию. Спасибо тебе огромное
Крутяяяк!!!
Спасибо!
Жека ты крут!!! Все так вовремя))) как только подумал про это, так сразу у тебя видос.))
Дай тобі Боже здоров'я, добрий чоловіче!!!
Дякую!
Спасибо ! )
Жека - топчик!)
Видео супер
Wow! Контент как по заказу! +100500 лайков!
Спасибо!
Ух, как актуально))
Я рад!
8:46
11:54 не анимировать когда скролишь вверх
13:30 анимация текста при скроле
15:39
17:33 анимация изображения + текст
19:32 поочередное появление
(комментарий для себя)
Как всегда на высоте, вот только в силу обыденности уже лень писать подобные комментарии, ведь и без них и дураку все понятно) теперь ждём js ♥️♥️♥️
JS уже скоро!
Спасибо за разбор, хотел уточнить - Вы не упоминаете про оптимизацию использования события scroll для того, чтобы не усложнять материал или на то есть другие причины? Я имею в виду throttling или requestAnimationFrame
Спасибо!
Спасибо большое
Пожалуйста!
Как всегда все круто! Спасибо! вот вопрос, для вэб программирования нужно углубление в JS? или достаточно знать какую то базу? И будут ли уроки по JS?
Для верстки базу, для программирования глубже. Уроки по JS будут!
@@FreelancerLifeStyle благодарю, будем ждать!
Ого))