Создание красивого сайта с плавающими карточками и параллакс эффектом. Практика JavaSctipt

Описание

💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/
💥 Современный JavaScript. Полный курс: https://webdesign-master.ru/courses/javascript/

В этом уроке мы рассмотрим создание красивого сайта с плавающими карточками при движении мыши в качестве фона. Мы научимся решать нестандартные интересные задачи в веб-разработке, используя возможности современного CSS и JavaScript. Ключевые особенности данного урока - это параллакс эффект между карточками при движении мыши, эффекты при наведении и плавный скролл. Но самое главное - это реализация умного алгоритма размещения карточек. При загрузке или обновлении сайта, карточки выстраиваются автоматически в рандомном порядке, не перекрывая друг друга. Учитывается максимальное количество элементов, которые могут быть помещены в шапке сайта. Кроме того, мы реализуем модель, которая раздает рандомные размеры карточкам и рандомную глубину в пространстве со следующей логикой - чем меньше объект, тем он дальше в parallax сцене. Также мы реализуем возможность плавного скролла, параллакс эффект и плавное растворение.

Материалы урока: https://webdesign-master.ru/blog/html-css/events-lesson.html

Таймкоды:
00:00:00 — Начало урока
00:02:11 — Материалы урока
00:02:40 — Приступаем к созданию
00:08:54 — HTML разметка
00:15:44 — CSS стилизация
00:28:29 — Практика JavaSctipt
01:12:30 — Глубина сцены
01:16:52 — Плавный скролл
01:22:21 — Параллакс эффект
01:25:58 — Что ещё изучить?

ВКонтакте: https://vk.com/jediweb
Телеграм: https://t.me/jediweb
Дзен: https://dzen.ru/jediweb

Автор

WebDesign Master