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

Вы не можете голосовать за это видео Вы не можете голосовать за это видео

100% (1 голос)

Длительность: 46:53 Просмотров: 152 Уникальных 13 Добавлено: 16. 06. 2023 Пользователь:

Описание В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый 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 Свободный скроллинг сайта freeMode
44:27 Как сделать вертикальный параллакс сайт
45:41 Что ещё изучить?

Категории: Обучение