JavaScript фичи #2 Parallax на чистом JS | Параллакс эффект

Мой личный YouTube-канал:

Продолжаем изучать JS фичи и сегодня делаем parallax effect на чистом Javascript. Вообще для параллакс эффекта уже существуют готовые библиотека, а мы так, немного поиграемся с параметрами clientX и Data-атрибутами.

Ссылка на весь плейлист JS-фичи:

Подпишитесь на канал, если вам нравятся эти видео:

Больше контента в нашей группе Вконтакте
Присоединяйтесь к нашему сообществу Discord
Telegram-канал "Лысый из браузера":

-----------
Я использую хостинг Link Host с 2014 года

Каналы с крутыми фичами на CSS и JavaScript:

Канал с терминами для айтишников:

Канал, где публикуют ссылки на полезные сервисы и сайты:

[klimash]

Отлично объясняете! Но уже второй урок вы вызываете querySelectorAll внутри коллбэка. Поиск по DOM-дереву это дорогая операция, тем более querySelectorAll. Таким образом вы в 2-3 раза замедляете работу скрипта. Элементы в процессе не меняются, и их data-speed тоже. Поэтому есть смысл записать их в переменные заранее и не вычислять каждый раз. Так как ваши уроки смотрят в основном начинающие, то они запоминают плохие практики не осознавая этого.

[criticlswitch]

Сколько каналов на эту тему не пересмотрел, Артём лучше всех даёт инфу. Спасибо большое!

[zoyavorobei]

У Вас очень интересные уроки. Не бросайте это дело.

[XenonIPC]

Очень правильно, что пишешь const. Это говорит программисту и интерпретатору, что данная переменная не будет дальше переопределяться другими значениями. И когда смотришь чужой код, то не надо внимательно просматривать всю функцию чтобы понять, а не переопределил ли ее автор каким-то другим объектом/значением. Те кто критикует использование const слабо разбираются в теме. const надо использовать везде где только можно.

[nikitaananjevs]

Круто! спасибо огромное! Даже не думал, что мой вопрос так быстро всплывет!!!

[Dudarik]

Фоновые изображения из урока(вдруг кому пригодится :) ):

[ЕвгенийОксенчук]

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

[Mikołaj-zf]

Как раз то что нужно, ты большой молодец)

[rva]

КТО ЗА ПОДДЕРЖИТЕ ЛАЙКАМИ!!!!


Артем, сделайте тач слайдер на события pointers, touch... реально полезно уметь это делать. Можно конечно и через готовые решения, но нужно и самому разобраться!!! Какой то прикольный слайдерик адаптивный.

[ОксанаКовш-ът]

Огромное спасибо! Как всегда очень доступно и интересно!

[ОртодоксальныйВатник]

Конечно это лайк.
Но говорить что мой лайк ничего не стоит...((
Он много стоит.
Куда попало я свой лайк не тыкаю!)

[leemne]

background-size можно писать в общей куче. background: #fff url('img.jpg') center / cover no-repeat;

[valeriipimenov]

Ты крут, просто жесть
жмякнул бы хоть 100 раз лайк
Спасибо за информативность !!!

[АндрейЦарик-чж]

Урааа! Еще не досмотрел, а уже жду следующую фичу! =)
Спасибо!!!

[hustlecustle]

Классная рубрика, хотелось бы ещё, чтобы вы оставляли папку с кодом в описании

[hudshnik]

Ещё одно хорошее видео, спасибо за контент!!

[Jake-vorobei]

О май гад. Ты учишь как божечка. Я покланяюсь тебе, о великий разработчик Артём. Прими меня вослужение и я буду приносить тебе в полнолунее жертву твоих врагов и конкурентов, и еще тех кто ставит дислайки.

[obzoryGameMAX]

Пожалуйста расскажи как сделать свой вертикальный ползунок прокрутки страницы сайта и скрыть базовый у браузера. Это очень интересно!

[space]

Для работы с тегом img тебе нужно было прописать: .layer img {width: 100%; height: 100%; object-fit: cover}

[АндрейЯкир]

Смотрю твоё видео в такой же футболке только оранжевой 0_0