Создание сайта с горизонтальным Parallax эффектом (HTML CSS JavaScript)

Рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену. Я покажу самый простой и универсальный способ как создать сайт с параллакс эффектом, который вы с легкостью сможете использовать в ваших проектах.

Таймкоды:
00:00 Начало урока
01:28 Обзор материалов урока
02:26 Подготовка изображений для Parallax эффекта
18:37 Приступаем к HTML верстке сайта
18:54 Подключаем файлы CSS и JavaScript
21:06 Базовая HTML верстка сайта
24:20 Приступаем к CSS стилизации
24:46 Стилизация экранов для скролла
26:21 Логика движения параллакс слоев
27:33 Универсальные HTML атрибуты для Parallax
33:33 Эффект виньетки с помощью CSS
35:10 Для чего нужен transform-style: preserve-3d
36:36 Добавляем частицы с помощью canvas JS
40:06 Свободный скроллинг сайта free mode
44:27 Как сделать вертикальный параллакс сайт
45:41 Что ещё изучить?

[dizhelf]

WebDesign Master, хочу сказать тебе огромное спасибо за то что ты делаешь не "простые вёрстки за 40 минут", а показываешь реально сложные элементы и показываешь как их можно упростить. Думаю для меня ты стал человеком который показал, что вёрстка не заканчивается на карточках товара и логотипа в header, ты показал что можно сделать всё что захочешь и поэтому, добавляю тебя в своё сердечко, рядом с другими ютуберами, с которыми я проходил тяжелую дорогу вхождения в frontend.

[ArtyomManokhin]

Просмотрел и повторил больше десятка уроков. Буду смотреть и дальше, а также ждать новых. Офигенно! Спасибо

[ЛейлаМустафаева-хс]

Добрый день! какой вы отличный учитель! Благодарю Вас! Спасибо огромное! Я Вас Люблю!

[frozyarozin]

как же я люблю видео под музыку из таких игр, кайф для ушей 😌

[mansur_sw]

Нигде нету таких уроков, описано очень подробно и нравится мне оно, спасибо большое вам что делаете нам такие уроки :)

[KudaTiTudaiYa]

Первый раз на этом канале, посмотрел видос последний который вышел 6дн наза и сейчас начал этот и уже могу сказать: Вы простт владыка по данному Лайк, подписка, Спасибо. Я вас долго искал😁 вы мне были нужны как вода

[etoeto]

Шикарный урок, очень понятно подан, сам результат - нечто прекрасное. Огромное спасибо автору

[igorsenichev]

За такой шикарный МК и 1000 лайков не жалко поставить. Очень нравятся ваши уроки 👍

[timurislamov]

Самый лучший канал шикарнейших анимаций

[АртёмОльховой-фе]

Тот редкий случай, когда я кому-то на ютубе ставлю лайк и подписываюсь) Классная работа! с вашего позволения анимацию с огоньками забрал и подключил на твою работу с волшебным лесом =)

[Aritee]

Спасибо за тутор, действительно лучший канал из этой категории

[taras]

Оба проекта с css parallax эффектом зашли на ура) Спасибо

[AnVas]

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

[ogiamirov]

ты просто лучший) первый видос с параллакс эффектом я делал 5 часов(ну за ним повторил), а уже вот второй потратил час. Уже мнооого чего понял. Аригато за урок)

[orazdaurenov]

Просто замечательно!!
Спасибо за очень полезный и интересный урок!!

[feodosiyazadonskaya]

Я давно представляла Нечто... Наконец нашла. ❤❤❤❤❤❤❤❤❤❤❤❤

[semimaks]

Ещё не посмотрел видео, но за оформление и подачу материала лайк, - очень впечатляет! Сделано старательно и с душой

[grayowl]

Спасибо большое! Одна маленькая поправка, хоть оно и понятно по смыслу о чем идет речь, но, все-таки то место изображения где нет пикселов - (как черно-белая шахматка) - это - "прозрачность", а не "непрозрачность". Не принципиально, конечно, но начинающих может запутать 🙂

[littlecat]

Большое спасибо за урок! Очень красиво и интересно

[СергейВишневский-эм]

Я просмотрел пред идущий ролик, но не успел пройти урок. Пройду в ближайшие дни, так что несколько часов просмотра гарантирую)))