Текст поверх повноекранного фонового відео за допомогою mix-blend-mode

29

Від автора: в попередніх своїх статтях я продемонстрував роботу повноекранних фонових роликів на веб-сторінках, а також показав, як за допомогою mix-blend-mode створювати текст з автоматичною контрастністю. Але я ніколи не використовував обидва методу в одній статті, як сьогодні.

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

Розмітка

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

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

ZIGGY

Men
Women
Stores
Contact

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

There’s a brand new dance but I don’t know its name…

CSS

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

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;
}

За події hover я перемикаю колір фону і заголовка:

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;
}

Контраст тексту створюється за допомогою властивості mix-blend-mode: overlay. Також підійде значення difference.

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

Розмір шрифту в демо на CodePen я задав в одиницях виміру vmin. Такий підхід зокрема відмінно працює з адаптивним дизайном. У наступних статтях я більш детально розповім про одиниці вимірювання vmin і vmax.