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

💥 Все курсы в одном комплекте: https://webdesign-master.ru/bundle_courses В этом уроке мы рассмотрим создание сайта с CSS эффектами и анимацией. Сайт будет выполнена с эффектом Parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом размытия. Страница урока: 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://dzen.ru/jediweb

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