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

Создание сайта от А до Я (комплексный курс): https://goo.gl/ankxq9 Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD Создание крутого слайдера (+посадка на CMS): https://bit.ly/jVLyQ8 Все курсы в одном комплекте: https://wd-m.ru/bundle В этом уроке мы рассмотрим создание потрясающей странички с различными эффектами, анимациями. Галерея будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом Blur. Поработаем с триггерами для анимации скрытия, появления заголовка и текста нашей композиции. Бонусом мы разберем создание текстового градиента с помощью CSS. Я рекомендую посмотреть этот урок до конца, здесь я собрал много различных техник и приёмов, которые вам пригодятся в работе. Страница урока: https://webdesign-master.ru/blog/html-css/create-cool-gallery-miami.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 Что ещё изучить? ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://wd-m.ru/zen