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