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

[@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

[@СергейДемин-г5в]

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

[@nitagas187]

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

[@СергейДемин-г5в]

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

[@СергейДемин-г5в]

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

[@PupaLupaZalu]

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

[@DenisZagvozdin]

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

[@FreelancerLifeStyle]

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

[@jasonborn4373]

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

[@george_m641]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@boy_ron]

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

[@FreelancerLifeStyle]

Спасибо!

[@blodorn7895]

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

[@blodorn7895]

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

[@narekhayrapetyan5542]

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

[@moi-nick-zanyat]

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

[@abolnikov]

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

[@zmeygorynych5684]

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

[@СергейСтепаненко-и7й]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@bio.Minecraft]

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

[@FreelancerLifeStyle]

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

[@egoryurchenko7343]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@АсяА-ч3я]

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

[@eduardsakulin8700]

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

[@shukonfadah5725]

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

[@demendarkness5562]

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

[@ПавелПискарь-й6ъ]

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

[@FreelancerLifeStyle]

Спасибо!

[@koesh4696]

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

[@ВиталийКабаков-ф5э]

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

[@FreelancerLifeStyle]

Спасибо!

[@glicerin4ik]

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

[@Артём-к6ю1г]

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

[@xarex785]

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

[@ye5275]

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

[@FreelancerLifeStyle]

Спасибо!

[@elkhanhamet2561]

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

[@Fr4Q-h7l]

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

[@anutasolnechnaya8297]

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

[@FreelancerLifeStyle]

Я рад!

[@Виктор-ж2р2и]

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

[@DenysIvanov-z7c]

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

[@jusikXL]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@alexles5003]

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

[@dmitrys5369]

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

[@FreelancerLifeStyle]

Спасибо!

[@johndoe4016qweasd]

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

[@FreelancerLifeStyle]

Спасибо!

[@xxFursiKxx]

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

[@ЕгорВоробьёв-ф7п]

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

[@dmitrid.317]

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

[@FreelancerLifeStyle]

Спасибо!

[@TheAiAm]

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

[@FreelancerLifeStyle]

Спасибо!

[@SuperRAilya]

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

[@thevalkk5301]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@gio2156]

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

[@FreelancerLifeStyle]

Спасибо!

[@TheFastmind]

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

[@iventeye]

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

[@FreelancerLifeStyle]

Супер!

[@СергейДемин-г5в]

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

[@iventeye]

@@СергейДемин-г5в а что рентабельно?

[@СергейДемин-г5в]

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

[@СергейДемин-г5в]

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

[@TheMuxacb]

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

[@FreelancerLifeStyle]

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

[@glebkabayjanov5646]

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

[@АлексейАрестов-у8у]

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

[@maksrygaev3900]

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

[@kulikboxx]

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

[@FreelancerLifeStyle]

Дякую!

[@anastasiyaiko444]

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

[@anastasea9101]

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

[@Shadow9402]

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

[@FreelancerLifeStyle]

Я рад!

[@spr1ng586]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@НикитаМальцев-н8в]

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

[@xakxkux8381]

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

[@FreelancerLifeStyle]

Спасибо!

[@Дмитрий-л4с9х]

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

[@yellowmind]

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

[@FreelancerLifeStyle]

Супер!

[@yuriybondaruyk1145]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@СергейГурский-ъ8м]

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

[@FreelancerLifeStyle]

Я рад!

[@diasoralbekov6465]

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

[@anvar_music]

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

[@elenarizhankova6316]

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

[@artemkosherenkov8710]

один з кращих для мене каналів по фронту !!! як завжди - ТОП

[@FreelancerLifeStyle]

Дякую!

[@наталиворон]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@stp9ua]

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

[@vladislavbondarenko5190]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@КаналДимона-ю1ъ]

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

[@artikor8071]

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

[@Andrey_Mendel]

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

[@Andrey_Mendel]

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

[@ДмитрийМельников-ъ3в]

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

[@ДарьяАрсеньева-х9и]

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

[@TheVer0n]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@gros_chat_noir]

Дякую! Очень полезный урок!

[@tatigif7451]

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

[@alexkreyn386]

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

[@FreelancerLifeStyle]

JS уже скоро!

[@marinaermilova7912]

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

[@__-qk1jr]

Дарова, Жека, спасибо за урок

[@FreelancerLifeStyle]

Пожалуйста!

[@МаксимРыжиков-ы1п]

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

[@SirKotelok]

Тем кто пишет в 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; } }

[@ТимурСагайдаков]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@АлександрЧернов-х2у1и]

Ух, как актуально))

[@FreelancerLifeStyle]

Я рад!

[@amily-sky]

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

[@sonyachna_jul]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@EvgenOl]

Теперь ноутбук при просмотре этого сайта греет немного лучше. Спасибо :)

[@phat80]

Слабенький у тебя ноутбук, если его это так напрягает )))

[@mikekuibyshev4848]

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

[@JoSmith0]

Wow! Контент как по заказу! +100500 лайков!

[@FreelancerLifeStyle]

Спасибо!

[@ТинаКовригина]

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

[@nermers5029]

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

[@andreyglavatskikh6403]

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

[@ОлегМарченко-ы2ь]

Без азов JS немного сложно заходит. Лайк и СПАСИБО!

[@FreelancerLifeStyle]

Азы будут!

[@serhiipeksymov3739]

Круто!💪

[@FreelancerLifeStyle]

СпасибО!

[@kotbarsik9613]

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

[@Sobanim]

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

[@deevue_sews]

Спасибо. Мне урок понравился. Нет обычного твоего наигранного ютубного - эгэгей!!!, -...погнали!!!, -... замечательно!!!. Извини это обычно не круто) (Хотя в уроке про адаптивный текст, это было искренне, я почувствовал что ты был на самом деле очень рад, в остальных всех уроках - "не верю") Интересно было бы посмотреть как сделать подобную функцию для анимации более гибкой, например как magicscroll, хотя бы примерно))) В общем годный контент. Спасибо!

[@FreelancerLifeStyle]

Спасибо!

[@maxim7603]

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

[@immawf]

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

[@FreelancerLifeStyle]

Спасибо!

[@anastasiyaiko444]

Супер!

[@АркадийТогонидзе]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@ВладиславКуличков-й1м]

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

[@iturist97]

16:08 - в этом месте не совсем понятно зачем эта строка - ._anim-show ._active (если _anim-show, тольлко у параграфа), и без нее все работает, пишем только - ._active ._anim-show { ... }

[@TipAnswer]

Подсказка не большая, можете не проверять на > 0 а просто записать aniItems.length и все, JS движок проверит, длинна массива не falsy ли значения. А falsy значение это null,false,true, 0 как раз наш , 0.0, -0.0, пустая строка.

[@FreelancerLifeStyle]

Возможно ошибаюсь, но где-то это не сработало, по этому пишу наверняка)

[@SK-in5bj]

Огромное спасибо за доступный и бесплатный формат подачи, и то, что осталось на русском языке из материалов. Очень надеюсь и жду, когда все хорошо закончится для Украины и украинцев. Жаль, что русскоязычный сегмент потерял такого талантливого блогера. Мира и процветания тебе, твоей семье и твоей родине.

[@nitagas187]

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

[@maxim.lyubimov]

code.mu/ru/markup/manual/css/property/background-attachment/ и webref.ru/css/background-attachment

[@Observer7-b2d]

Нужно для картинки поставить значение свойства position: fixed; И установить z-index: -1;

[@наталіяклемишова]

Вот это да 😮

[@FreelancerLifeStyle]

Ага)