Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание фонового видео, прокручивающегося вместе с содержимым

6 августа 2018 | Опубликовано в css | 11 Комментариев »

Этот урок родился из другого туториала, в котором было описано создание полноэкранного фонового видео HTML5. Одним из главных вопросов был эффект прокручивания полноэкранного видео, расположенного за содержимым и поднимающегося при прокрутке вверх вместе со всей веб-страницей. Решение в этой ситуации довольно простое: использование расположений CSS месте со стилями, обычно используемыми для растягивающихся изображений. А также в этом уроке будут интересным образом использованы режимы наложения.

 

Основы прокручивания видео HTML5

Разметка начинается довольно похоже на пример из статьи о фоновом видео, но вместо того, чтобы разметить видео HTML5 в корне веб-страницы, т. е., прямо после открывающего тега <body>, оно располагается внутри элемента, в котором находится основное содержимое. Для этого примера предположим, что видео размещается внутри элемента шапки, в самом начале основного элемента:

<main>
  <header>
    <video autoplay loop>
      <source src="forest-fire.webm">
      <source src="forest-fire.mp4">
    </video>
  </header>

Используемое видео должно соответствовать основным правилам для фонового видео, указанным в вышеуказанной статье.

Видео заданы те же самые стили, которые задаются адаптивным полноширинным изображениям:

main {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}
main > header video {
  width: 100%;
  height: auto;
}

Если вам нужно, чтобы видео выглядело более полноэкранным, просто измените значения ширины и максимальной ширины основному элементу, чтобы расширить его.

В этом случае на видео наложен заголовок и приглашение прочитать связанную историю. Эти элементы располагаются сразу после элемента видео, внутри элемента шапки:

    <h1>A world Aflame</h1>
   <a href="#maincontent">▼</a>
</header>

Якорная ссылка перепрыгивает на элемент с идентификатором #maincontent, расположенный сразу за элементом шапки. После этого элемент шапки нужно настроить с помощью кода CSS, чтобы эти новые добавленные элементы можно было расположить послойно:

main > header {
  position: relative;
}

Код CSS для элемента первого заголовка и ссылки следующий:

main > header h1 {
  position: absolute;
  bottom: 40%;
  left: 1rem;
  font-size: 4rem;
  text-transform: uppercase;
  mix-blend-mode: overlay;
}
main > header a {
  display: block;
  text-decoration: none;
  font-size: 2rem;
  color: #fff;
  opacity: .5;
  position: absolute;
  bottom: 1.5rem;
  width: 100%;
  text-align: center;
  transition: .3s;
  animation: downwardprompt 2s 1s;
}
main > header a:hover {
  opacity: 1;
}

Стрелка, направленная вниз, выполняет короткую анимацию через пару секунд после загрузки страницы, приглашая пользователя прокрутить страницу вниз:

@keyframes downwardprompt {
  to {
    transform: translateY(2rem);
    opacity: 0;
    }
}

Вот и все. Результат можно увидеть ниже:

Естественно, существует много вариаций этого подхода, но основной код CSS, нужный для достижения этого эффекта, будет примерно таким же.

Использовано видео Bill Blevins, лицензированное по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:


�


Коментарии запрещены.

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые