Все курсы в одном комплекте: [ Ссылка ]
Создание сайта от А до Я: [ Ссылка ]
В этом уроке мы рассмотрим создание сайта с css эффектами и анимацией. Сайт будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом размытия.
Материалы урока (результат, исходники): [ Ссылка ]
Таймкоды:
00:00 Начало урока
01:02 Подготовка к верстке
02:00 Базовая HTML-разметка
02:54 Инициализация JS-библиотеки
03:26 CSS-стилизация страницы
04:07 Подключение шрифта CSS
04:46 Общие стили документа html, body
05:26 Размер шрифта в зависимости от экрана
06:58 Первые параметры JS-библиотеки
07:52 Адаптивный слайдер
08:58 Наклон блока CSS rotate
10:11 Прокрутка блока на скролл и анимация
11:21 Анимация cubic-bezier
12:53 Верстка изображений с Parallax эффектом
15:54 Оптимизация CSS анимации с помощью will-change
17:15 Настройка глубины Parallax эффекта
17:51 Синхронизация двух слайдеров
20:23 Насыщенность через CSS и Blur эффект
22:33 Анимация открытия и закрытия
26:06 Верстка текста адаптивного размера
28:21 Градиент текста с помощью CSS
29:27 Триггер для анимации текста при скролле
31:34 Анимация скрытия текстового блока
33:48 Что ещё изучить?
ВКонтакте: [ Ссылка ]
Телеграм: [ Ссылка ]
Дзен: [ Ссылка ]
#дизайн #уроки #tutorial #design #animation #разработка
