Адаптивная вёрстка сайта с нуля + GSAP анимации

В этом видео можно познакомиться с тем: - Как верстать адаптивно - Как пользоваться медиа запросами - Как сделать слайдер - Как писать анимации на GSAP - Как делать анимации при доскроливании до элемента Я попытался всё доступно объяснять. Если что непонятно - пишите Код - Посмотреть результат - 0:00 Введение 1:25 Начало работы с редактором 6:03 Live Server расширение для Visual Studio Code 8:12 Знакомство с Figma 9:32 HTML шапки сайта, header 26:30 Расширение Chrome ColorZilla для получения цвета с сайта 29:43 CSS цвет шапки сайта, header 31:34 CSS по умолчанию у тега body 34:07 Как работает свойство box-sizing 38:00 Указывание удобного box-sizing для всех элементов 42:25 HTML Навигационные ссылки шапки сайта 44:45 CSS стили для header элементов 1:35:50 CSS медиа запросы для header элементов 1:52:00 HTML блок intro 2:07:35 CSS блок intro 2:28:23 HTML нижняя часть intro 2:33:20 CSS нижняя часть intro 2:43:30 CSS медиа запросы для intro элементов 3:06:30 HTML блок deals 3:14:20 CSS блок deals 3:39:10 HTML блок vendor 3:54:20 CSS блок vendor 4:19:15 HTML блок teams 4:32:40 Что такое слайдер Swiper, как им пользоваться 4:49:00 CSS блок teams 4:53:22 JS код для инициализации слайдера Swiper 5:06:06 CSS блок teams, стилизация слайдера 5:29:35 JS установка чётных/нечётных классов для элементов слайдера для их раскрашивания 5:59:20 CSS блок teams, стилизация слайдера 6:16:50 блок security 6:37:50 HTML блок footer 6:52:12 CSS блок footer 7:05:20 Как всё анимировать 7:07:00 JS создаём функцию, в которой будут GSAP анимации 7:08:45 Смотрим документацию библиотека для анимаций GSAP 7:11:00 JS Пишем анимации для header ссылок 7:25:00 JS Создание функции для анимации при доскроливании до элемента или если он находится в области видимости пользователя 8:10:00 JS Делаем не глючную анимацию 8:17:40 JS Анимация intro текстов, кнопки и картинки 8:43:10 JS Анимация intro companies 8:52:00 JS Анимация deals__section-header 9:04:40 JS Анимация deals__two 9:10:22 JS Анимация vendor__section-header 9:15:37 JS Анимация teams__title 9:18:10 JS Анимация teams__slider 9:25:14 JS Анимация security__section-header 9:28:15 JS Анимация security__img 9:33:37 JS Анимация footer 9:35:43 CSS добавление каких-то мелких правок 9:54:22 Завершающая речь Мои контакты: почта - kamahinmihail@ vk - telegram - twitch - vk play live -
Back to Top