Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: wd-m.ru/createsite
Сегодня мы создадим крутую 3D сцену с использованием HTML, CSS и JavaScript. Мы рассмотрим интересные приёмы вёрстки - создадим эффектный анимированный фон, переливающееся освещение сцены, 3D эффект вращения айтемов и разработаем кастомный эффект переключения слайдов с помощью cubic-bezier.
Страница урока (результат, исходники): webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
01:07 Обзор материалов урока
08:25 Размещаем код в редакторе
09:41 Подключаем библиотеку слайдера
10:39 Настраиваем проект
12:19 Приступаем к HTML верстке
13:56 Верстка видео в качестве фона на сайте
17:17 Создание виньетки на CSS
18:27 Верстка освещения 3D сцены, анимация
21:45 Определяем контейнер для слайдера
23:12 Добавляем эффект Glow в сцену
25:37 HTML верстка заголовка
27:53 Верстка карусели Swiper
29:55 Левая и правая части 3D изображения
33:13 Вычисляем высоту с помощью CSS calc()
34:33 Продолжаем верстать 3D изображения
36:23 CSS стилизация активного айтема карусели
39:26 Наполняем сцену актуальными слайдами
40:34 Кастомная CSS анимация cubic-bezier
42:14 Добавляем тень моделям с помощью CSS
44:47 Верстка надписей айтемов
46:46 Создаем 3D эффект на CSS, анимация
52:32 Ширина слайдера на разных разрешениях
53:57 Full Page навигация карусели
1:01:50 Кастомная анимация перелистывания Swiper
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb