Анимация при прокрутке (скролле) страницы на HTML CSS и JavaScript
HTML-код
- Опубликовано: 31 май 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. Не всегда хочется пользоваться сторонними библиотеками и всякими jquery. Спасибо и за это! Продолжай делать контент и помни: живи, а делай годный контент в свободное время
Хех, спасибо!
Чем больше узнаю, тем больше понимаю что изучать и изучать ещё оооочень много! Спасибо Жека!
Спасибо большое за такое подробное описание и коментирование кода!
Всё работает))
Большое спасибо тебе за твою работу! Канал просто бомба, для меня как новичка это просто кладязь полезной и интересной инфы.
Отдельно благодарю за качество монтажа, это просто нечто)
Спасибо!
Как мне нравится твой канал!!! Все понятно и очень нравится твой стиль преподавания!!!
Я рад!
Сложный js простыми словами от Жеки) Спасибо, огромный вклад в наше образование)
все ваши виде это лучшее что можно найти на русскоязычном сегменте! вы самый лучший! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье!!!
80к Жека, мои поздравления!))) Урок по скроллу супер полезный спасиб!!!
Спасибо!
Лучший! Спасибо! Только твои туторы адекватно работают с первого раза!
просто огромное количество информации в одном ролике, обязательно навешаю ко всему)
Один из самых крутых каналов, очень много полезного. Спасибо большое!
Наконец-то!!! Всё время хотел понять как это работает, да всё руки не доходили.Спасибо большое!
Пожалуйста!
Как раз то что нужно мне сейчас для заказа) Спасибо! лайк
Пожалуйста!
Огромное спасибо за годную информацию! Ваши видео помогают мне во многом!
видео наверное полезное для тех кто только начинает изучать фронт.
Но даже в этом случае лучше бы сказать что так делать можно но не желательно.
Потому что есть Intersection Observer API
то, что я искала! Спасибо! тысяча плюсиков в карму)))
Буквально каждое видео - невероятно годный контент. Не канал, а сокровище. Очень рад, что встретил его. Спасибо большое и удачи!
Спасибо!
Ура! Злободневный вопрос! Сейчас буду смотреть! Лайк поставил сразу 😜
Спасибо!
Отличный урок, Женя, спасибо большое! Обучаюсь только по твоим видео 👍
Я рад!
Женя, это огонь!! Спасибо!!
вообще не разбираюсь в Js, по рекомендации зашёл. Интересно стало, и тут пожалуйста, все очень понятно. Немного посидел, переписал, все сделанное, буду учить дальше). Спасибо большое за информацию!
Я рад! Пожалуйста!
Женя, спасибо за видео! Супер!
Спасибо. Искал везде материал и опять нашел то, что нужно у тебя)).
Супер, спасибо! Столько тонкостей показал.
Как всегда всё супер!) Большое спасибо)
Только вот, хотел бы ещё увидеть видео от Вас, о том, как сделать анимированный счётчик (клиентов, заказов), где при скроле на элемент идёт отсчёт от 0 до заданного значения. В лендингах такое часто используется
Спасибо за скрипт Жека! Шикарный урок как всегда! Обнял
Ай да Жека! Всегда умеет порадовать годнотой! Лайкос однозначно)
Спасибо!
Очень классно выглядит, правда понял только суть. Завтра попробую за видео повторить. Урок очень качественный. Лайк подписка.
Спасибо за внятный и понятный урок. Жаль, так мало людей Вам поставили одобрительную оценку из тех, кто просмотрел видео (
Пожалуйста!
Дякую, гарний приклад ))
Дякую за твої труди)
Рома дуже дякую тобі за урок, черпаю спокій та рівновагу, дуже цінні знання. Мирного неба
Очень нужная инфа, спасибо!
Пожалуйста!
Спасибо, пол дня убил чтобы найти как это сделать без библиотек. Обычно на ютубе ничего путного никогда не находил, но потеряв надежду что то найти решил написать, и нашел!
Спасибо огромное!! всё по сути и понятно!
Спасибо! Не всё, конечно, понятно, но есть над чем поломать голову. Отличный урок!
Спасибо!
Как всегда - то, что нужно!)
Пожалуйста!
Великолепно! Спасибо большое!
Как всегда топ! Спасибо, Жека
Пожалуйста!
Спасибо! Круто, как всегда 😉
Как Вы делаете анимацию на сайтах? Используете ли animate.css и wow.js или делаете на чистом js? Актуально ли в 2021 использовать animate.css?
невероятно полезное видео!
благодарю за контент
успехов
Спасибо!
Фрилансер, благодарю! Все получилось!!!
Только увидела новое видео - сразу лайк, а потом уже смотреть.
Спасибо!
Спасибо за видосы, просто The Best!!
Спасибо за разбор, хотел уточнить - Вы не упоминаете про оптимизацию использования события scroll для того, чтобы не усложнять материал или на то есть другие причины? Я имею в виду throttling или requestAnimationFrame
Как же я ждал этого видео ))
Хех, надеюсь полезное!)
Полезная. Информация. Проверять я ее конечно же буду :D
+идея для видео - блочный скроллинг (fullpage.js)
Привет, еще как полезно и интересно. Спасибо большое.
Ну что сказать просто ЛУЧШИЙ !!!!!!!!!!!!!!!!!!!!!
Тем кто пишет в scss будет полезно.Если есть какие-то предложения или коррективы по миксину - пишите :)
@mixin scroll-appearance($X, $Y) {
transition: all 1s ease-in-out 0s;
transform: translate($X, $Y);
opacity: 0;
&._active {
transform: translate(0px, 0px);
opacity: 1;
}
}
Спасибо, полезное видео)
красавчик ))) спасибо за видосы !!!!
Только вчера искал как это сделать ничего не нашёл и сегодня ты делаешь такой подарок спс^
Пожалуйста!
Спасибо, Жека! Давно хотел узнать как это можно делать без библиотек на чистом js и теперь буду использовать.
Супер!
Не рентабельно
@@user-je1xd6sd4s а что рентабельно?
@@iventeye затраты, время. Хорошо когда вы работаете чисто на себя и один. В остальном есть множество библиотек для этого дела, а если там нет функционала его можно дописать. Вот смотрите у вас есть задача, построить многофункциональный сайт. Для этого обычно либо используют фреймворк или уже примерно заточенные модули на cms под вашу задачу. Вопрос: зачем строить свой велосипед, если уже есть машина, которая вас возит. (аналогия думаю понятна). Да бывают случаи когда нужно что то разработать почти с нуля, но такого на практике не много, получается нет смыла разрабатывать что то заново. Тот же бустрап, вы же не собираетесь его выкидывать, у него хорошая мультиплатформенная сетка. Да согласен может немного тяжеловесна, в этом случае берут за основу чисто расработанную сетку и убирают все остальное, т.к. В большинстве случаев стили будут применяться другие. Я все это к чему: если есть что то готовое, используйте по максимуму. Если вы будете разбираться как и где все это работает до мелочей, уйдёт куча времени, а если вы работаете в компании, это время могло пойти на другие полезные вещи
В тех же библиотеках можно просто вырезать некую функциональность, которая вам не понадобится. За счёт этого уменьшится вес, плюс вы в большей степени защищены от багов, чем при разработке своего скрипта. Рекомендую использовать туже самую AOS. Вырезать все что вам не нужно и использовать. Зато вы будете уверены что все будет работать как надо
Спасибо, классное видео
Как всегда на высоте, вот только в силу обыденности уже лень писать подобные комментарии, ведь и без них и дураку все понятно) теперь ждём js ♥️♥️♥️
JS уже скоро!
Благодарю!! Круто!!
Спасибо большое!
Максимально полезное видео!
Я рад!
Круто! Есть куда стремиться)) Видел такую анимацию у девушки веб-дизайнера на её сайте.
Повернувся до відео - це коли ти вже розумієш, що пишеться в js - супер!
Очень помогло, спасибо
Уже час сижу и не понимаю почему ошибка в консоле(
Спасибо за ролик!
Пожалуйста!
Я уже обыскался, как сделать такую анимацию. Спасибо тебе огромное
Дякую! Очень полезный урок!
Евгений огромное спасибо !!!!!
Пожалуйста!
очень нравятся видяшки, и все эти эффекты 😎😊🤩
видно как ты кайфуешь в конце от проделанной работы
Привет) А на сколько актуально сейчас использовать Intersection Observer для отслеживания появления элемента на экране?
Мне кажется, что сейчас Intersection Observer API имеет достаточную поддержку, что бы об этом думаешь?
подскажите пожалуйста, ато сам никак не доеду)) Поставил я анимацию на элементы слайдера. Вопрос: как сделать, чтобы анимация начинала выполняться в момент загрузки слайда? Сейчас получается, что анимацию можно увидеть только на первом слайде, так как она выполняется одновременно на всех слайдах. Спасибо.
Привет, Жэка! Крутой урок, как раз для заказа прямо сейчас нужен. Однако, возникла проблема. На некоторые элементы анимация сильно запаздывает. Пробовал увеличивать значение animStart, не помогает... В чем может быть проблема, подскажи?
спасибо огромное, очень помог
как всегда топовый контен!
а я думал это сложно, думал всякие плагины нужно подключать, которые понять сложнее и гораздо дольше, и подключал, лол, даже не пытался написать все руками, спасибо Жека! за почти что год я на ютубе лучше тебя никого не нашел, ни на англоязычном ни на ру
Спасибо!
Супер!
Жека спасибо за видос как всегда на высоте
Пожалуйста!
Только посмотрел про параллакс, а тут и анимация появилась. Спасибо, Жека! очень пригодится 🤔
Супер!
Вместо простыни js кода можно было использовать библиотеку Waypoints. И DOMContentLoaded не стоит забывать.
И я бы выделил стили анимации в отдельные классы, например .anim_fade_up .anim_fade_left что бы в будущем переиспользовать.
Узнал кое-что новое. Спасибо.
Женя, живи вечно! Ты сила!
Спасибо!
Спасибо большое!)))
Пожалуйста!
Круто, спасибо!
Пожалуйста!
Спасибо!
Спасибо ! )
ты очень крут) спасибо за урок
Пожалуйста!
Женя, здравствуйте. Я не совсем понимаю. Я никак не нашел у вас в HTML файле подключение Java файла.
Просто топчик!
Спасибо!
Видео супер
Круто!💪
СпасибО!
8:46
11:54 не анимировать когда скролишь вверх
13:30 анимация текста при скроле
15:39
17:33 анимация изображения + текст
19:32 поочередное появление
(комментарий для себя)
Жека, если я правильно понял, даже при малейшем скролле будет запускаться цикл снова и снова. Это не большая нагрузка на страницу?
Спасибо большое
Пожалуйста!