От автора: после появления моей статьи о полноэкранном HTML5 видео фоне в комментариях посыпались вопросы, как сделать фоновое видео для сайта, а именно «полноэкранного видео при прокрутке страницы»: видео, которое находится на заднем плане, но поверх которого появляется какой-либо контент.
Меня это слегка удивило, так как решение находится на поверхности, а именно применения CSS позиционирования в сочетании со стилями, которые обычно используют для изображений с плавающими размерами… я все же решил посвятить этому вопросу отдельную статью, а значит, мы воспользуемся необычным способом и задействует режимы наложения.
Основы в HTML5 видео во время прокрутки страницы
Разметка почти такая же, как в моем примере фонового видео, только HTML5 видео размещается не в корне страницы (т.е. сразу после тега body), а именно там, где оно необходимо. Для нашего примера сделаем видео внутри тега <main>:
|
1 2 3 4 5 6 7 |
<main> <header> <video autoplay loop> <source src="forest-fire.webm"> <source src="forest-fire.mp4"> </video> </header> |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееИспользуемое видео должно удовлетворять основным требованиям для фоновых видео роликов, которые я описал в предыдущей статье. Стили для видео такие же, как и для полноэкранных адаптивных изображений:
|
1 2 3 4 5 6 7 8 9 |
main { width: 80%; max-width: 750px; margin: 0 auto; } main > header video { width: 100%; height: auto; } |
Если хотите увеличить максимальную ширину видео, просто измените свойство max-width. В нашем случае сверху видео отображается заголовок, который зазывает пользователей прочитать статью. Заголовок и ссылка идут сразу за тегом video внутри header:
|
1 2 3 |
<h1>A world Aflame</h1> <a href="#maincontent">▼</a> </header> |
По якорю пользователь перепрыгивает на элемент с основным содержанием статьи, который находится прямо за тегом header. Далее нужно добавить стили к хедеру, чтобы все внутренние элементы были на разных слоях и со своим позиционированием:
|
1 2 3 |
main > header { position: relative; } |
CSS для H1 и ссылок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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; } |
Стрелка под видео слегка анимирована, подсказывая пользователю прокрутить страницу:
|
1 2 3 4 5 6 |
@keyframes downwardprompt { to { transform: translateY(2rem); opacity: 0; } } |
Вот и все! Существует множество вариаций данного метода, но основной код CSS почти всегда один и тот же. С помощью него и достигается этот эффект.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
