WebDesign Master
Курсы
Создание потрясающей галереи на HTML, CSS и JavaScript | Материалы урока

Создание потрясающей галереи на HTML, CSS и JavaScript | Материалы урока

В этом уроке мы рассмотрим создание потрясающей странички с различными эффектами, анимациями. Галерея будет выполнена с эффектом parallax при скролле, а при клике мы проработаем анимацию открытия и закрытия изображений. Мы создадим анимированный фон, который повторяет цвета изображений и плавно переливается из одного цвета в другой с эффектом Blur. Поработаем с триггерами для анимации скрытия, появления заголовка и текста нашей композиции. Бонусом мы разберем создание текстового градиента с помощью CSS. Я рекомендую посмотреть этот урок до конца, здесь я собрал много различных техник и приёмов, которые вам пригодятся в работе.

Создание потрясающей галереи на HTML, CSS и JavaScript | Материалы урока - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Материалы урока и готовый результат: Скачать

Рекомендуемые уроки и инструменты

  • Настройка VS Code для верстки: Ознакомиться с уроком
  • Таблица веб-цветов: HTML Color Names
  • Cubic-Bezier CSS Generator: Перейти на сайт

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

  • Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
  • Создание сайта портфолио с крутой анимацией | Материалы урока
  • Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
  • Создание Parallax эффекта на сайте при движении мыши | Материалы урока
  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
  • Создание крутого 3D сайта с анимацией прокрутки | Материалы урока

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master