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

Создание сайта от А до Я (комплексный курс): Создание интернет-магазина от А до Я: Создание крутого слайдера ( посадка на CMS): Все курсы в одном комплекте: В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену. Я покажу самый простой и универсальный способ как создать сайт с параллакс эффектом, который вы с легкостью сможете использовать в ваших проектах. Этот урок включает огромное количество приемов CSS, анимацию, плавный скролл, работу с трансформацией, работу с переменными и параметрами, программирование в JavaScript частиц Canvas и многое другое. Я рекомендую посмотреть урок полностью и пройти его вместе со мной, чтобы не упустить важные детали и закрепить знания на практике. Страница урока: Таймкоды: 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 Что ещё изучить? ВКонтакте: Телеграм: Дзен: