Создание потрясающей галереи на HTML, CSS и JavaScript (CSS-анимация, Blur, Parallax, Gradient) 

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы рассмотрим создание сайта с различными эффектами, анимациями. Галерея будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом Blur.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
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 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb