Создание крутого 3D сайта с анимацией прокрутки | HTML CSS JavaScript
Создание сайта от А до Я (комплексный курс):
Создание интернет-магазина от А до Я:
Создание крутого слайдера ( посадка на CMS):
Все курсы в одном комплекте:
В этом уроке мы рассмотрим создание сайта с потрясающей 3D анимацией скролла, используя возможности современного HTML, CSS и JavaScript. Мы разработаем модель движения слайдов в глубину, поработаем над кастомной анимацией, плавностью, красиво оформим композицию с помощью CSS, а также поработаем с аудио и видео контентом на странице.
Страница урока:
Таймкоды:
00:00 Начало урока
00:39 Обзор материалов урока
04:18 Подготовка к верстке сайта
05:25 Базовая HTML разметка и CSS стилизация
08:31 Подключение и настройка шрифтов
11:09 Стилизация контейнера и фреймов
13:56 Пишем движок 3D скролла на JavaScript
25:23 CSS анимация cubic-bezier
27:26 Антиалиасинг через transform-style
27:50 Верстка контента
29:46 Верстка изображений
35:18 Верстка видео (горизонтальный контент)
38:13 Умный перенос min-content
39:11 Оформление видео
41:35 Расстояние между фреймами
42:02 Верстка заголовков и текста
44:09 Верстка остального контента
48:52 Работа с аудио на странице
56:30 Что ещё изучить?
ВКонтакте:
Телеграм:
Дзен:
100 views
344
101
4 weeks ago 00:55:22 1
Как написать РЕГГИ с нуля. Пишу трек и делюсь крутыми фишками по созданию Reaggae
1 month ago 00:19:09 1
Самый НОВЫЙ МАРКЕТИНГ ПЛАН Гринвей | GREENWAY GLOBAL 2024
1 month ago 00:00:42 1
Переделываем обложку книги «Алхимик», Пауло Коэльо | Создание обложки ИИ
2 months ago 00:10:58 1
Как влияют гаджеты на детей – «ПОЖИРАТЕЛИ МОЗГА» Мультфильм про строение мозга и развитие ребенка
2 months ago 00:44:28 1
Руководство для новичков 2024 | MORDHAU Гайд
2 months ago 00:12:53 1
Как писать пост за 1 минуту с Чат GPT-4o? (промпт-инжиниринг для блогеров и экспертов)
2 months ago 00:06:54 1
СЕАНС ЧЕТВЕРГА. Шаблон здорового тела. ДНК и РНК. THURSDAY SESSION Healthy body pattern. ()
2 months ago 00:14:42 1
КАК РАБОТАЕТ ИНТЕРНЕТ?
2 months ago 00:03:47 1
Attack on Titan OP 7 [The Rumbling] cover by Ai Mori ft.@AlexTerrible