Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном
Все курсы в одном комплекте: https://wd-m.ru/bundle
Создание сайта от А до Я: https://goo.gl/ankxq9
Сегодня мы рассмотрим создание сайта с 3D эффектом вращения, используя HTML, CSS и JavaScript. Мы рассмотрим интересные приёмы вёрстки - создадим эффектный анимированный фон, переливающееся освещение сцены, 3D эффект вращения и разработаем кастомный эффект переключения слайдов на сайте с помощью cubic-bezier.
Страница урока: https://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
ВКонтакте: https://vk.com/jediweb
Телеграм: https://t.me/jediweb
Дзен: https://dzen.ru/jediweb
Watch video Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном online without registration, duration hours minute second in high quality. This video was added by user WebDesign Master 14 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 444,117 once and liked it 23 thousand people.