Текст поверх полноэкранного фонового видео при помощи mix-blend-mode

Дата публикации: 2016-09-26

От автора: в предыдущих своих статьях я продемонстрировал работу полноэкранных фоновых роликов на веб-страницах, а также показал, как с помощью mix-blend-mode создавать текст с автоматической контрастностью. Но я никогда не использовал оба метода в одной статье, как сегодня.

Недавно на сайте модной одежды Everlane появилась такая демонстрация, которая вдохновила меня на написание этой статьи. Наш код будет значительно проще, чем в предыдущем примере с полноэкранным видео, а также пользователь должен использовать последнюю версию браузера. Свойство mix-blend-mode на данный момент не поддерживается в MS Edge. Несмотря на эти ограничения, наш код достаточно прогрессивный: наше фоновое видео будет работать в IE10+.

Разметка

Разметка начинается с тега video, в котором прописывается новый атрибут playsinline (который обеспечивает работу видео на iOS 10) и атрибут mute (полноэкранное видео – зацикленный ролик с автопроигрыванием, который должен быть без звука).

<video poster="fashion.jpg" playsinline autoplay muted loop>
    <source src="fashion.webm" type="video/webm">
    <source src="fashion.mp4" type="video/mp4">
</video>

</video>

В демо на Codepen в верхней части страницы я разместил тег header с фиксированным позиционированием:

<header>
    <h1>ZIGGY</h1>
      <nav>
        <a href="#">Men</a>
        <a href="#">Women</a>
        <a href="#">Stores</a>
        <a href="#">Contact</a>
      </nav>
</header>

<h1>ZIGGY</h1>

<nav>

<a href="#">Women</a>

<a href="#">Stores</a>

<a href="#">Contact</a>

</nav>

</header>

Под меню я добавил немного текста. Текст должен быть коротким (пара слов, не больше), так как длинный текст с автоконтрастом намного сложнее читать:

<div id="fashion">
  <h2>There’s a brand new dance but I don’t know its name…</h2>
</div>

<h2>There’s a brand new dance but I don’t know its name…</h2>

</div>

CSS

Ролику задается абсолютное позиционирование, свойство object-fit, а также ширина и высота в 100%, дабы видео полностью закрывало окно браузера:

video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

video {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

}

Заметьте, что видео не зафиксировано. Как показано в нашем демо, техника лучше всего работает с небольшим центрированным текстом, который не доходит до нижней границы окна браузера. Чтобы все заработало, тегу body задается свойство margin: 0.

body {
  margin: 0;
  background: #000;
}

body {

margin: 0;

background: #000;

}

По событию hover я переключаю цвет фона и заголовка:

header {
  position: fixed;
  width: 100%;
  text-align: center;
  color: white;
  transition: .4s;
}
header:hover {
  background: rgba(255,255,255,0.8);
  color: #000;
}

header {

position: fixed;

width: 100%;

text-align: center;

color: white;

transition: .4s;

}

header:hover {

background: rgba(255,255,255,0.8);

color: #000;

}

Текст по центру расположен внутри тега div, который с помощью flexbox центрирует контент. Высота блока должна быть как минимум равна высоте окна браузера:

div#fashion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#fashion {

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

Контраст текста создается при помощи свойства mix-blend-mode: overlay. Также подойдет значение difference.

h2 { 
  font-family: Century Schoolbook, Georgia, serif;
  margin: 2rem 3rem 0;
  mix-blend-mode: overlay;
  color: #fff;
 }

h2 {

font-family: Century Schoolbook, Georgia, serif;

margin: 2rem 3rem 0;

mix-blend-mode: overlay;

color: #fff;

}

Размер шрифта в демо на CodePen я задал в единицах измерения vmin. Такой подход в частности отлично работает с адаптивным дизайном. В следующих статьях я более подробно расскажу про единицы измерения vmin и vmax.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки: css3