Создание красивого сайта с плавающими картинками. Материалы урока

В этом уроке мы рассмотрим создание сайта с плавной анимацией, реализуем самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode). Кроме того, я покажу, как правильно разрабатывать прелоадер для подобных сайтов.

Смотреть урок на YouTube

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

Стартовая HTML разметка

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Настройки CSS анимации:

Ниже представлен скриншот из сервиса Cubic-Bezier с изображением позиционирования точек Animation/Time. Изменяя положение ползунков, вы можете настроить анимацию по своему вкусу.

transition: all 1s cubic-bezier(.075, 1, .25, 1);

Мобильные устройства

Анимация Draggable должна работать только на больших экранах. Соответственно, на смартфонах возвращаем дефолтные параметры для отображения всех плиток Masonry.

В «main.css» дописываем медиа-запрос с достаточным запасом по ширине:

/* MOBILE */

@media (max-width : 992px) {

  .header {
    position: relative;
  }

  body {
    overflow: scroll;
    display: block;
    padding: var(--gap);
  }

  .gallery {
    width: 100%;
    column-width: 10em;
    transform: scale(1);
  }
  .gallery__item:hover {
    transform: scale(1);
  }

}

Полный JS-код урока

Нам необходимо задать условие медиа-запроса для выполнения скрипта только на больших экранах. В настоящее время рекомендую в JavaScript работать именно с медиа-запросами, а не использовать в условиях физическую ширину экрана в пикселях, как делали раньше.

window.onload = function() { // После того, как окно загружено

  setTimeout(function() { // Устанавливаем таймаут на 200мс

    document.body.classList.add('loaded') // Добавляем класс готовности body

    if (window.matchMedia('(min-width: 992px)').matches) { // Если не смартфон

      Draggable.create('.gallery', { // Запускаем плагин Draggable
        bounds: 'body',
        inertia: true
      })

    }

  }, 200)

}

Существует огромное количество способов работы с мобильными устройствами в JS. Это условия по физической ширине, работа с медиа-запросами, использование комплексных решений в виде плагинов и прочие. В большинстве случаев я работаю именно с медиа-запросами, так как этот способ является нативным, наиболее надежным и предлагает дополнительные полезные функции.

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

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

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

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

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