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

Создание сайта от А до Я (комплексный курс): Создание интернет-магазина от А до Я: Создание крутого слайдера ( посадка на CMS): Все курсы в одном комплекте: В этом уроке мы рассмотрим создание сайта с различными эффектами, анимациями. Галерея будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом Blur. Поработаем с триггерами для анимации скрытия, появления заголовка и текста нашей композиции. Бонусом мы разберем создание текстового градиента с помощью CSS. Я рекомендую посмотреть этот урок до конца, здесь я собрал много различных техник и приёмов, которые вам пригодятся в работе. Страница урока: Таймкоды: 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 Что ещё изучить? ВКонтакте: Телеграм: Дзен: