Мы уже не раз рассматривали интересные варианты реализации фонового видео с различными эффектами, каждый по своему уникальный и мы не могли обойти его стороной, в данном уроке мы решили поделиться с Вами еще одним, достаточно интересным способом реализации фонового видео. В данном уроке мы покажем, как применить еще один слой на видео, и подерем достаточно интересный видео-ролик, который будет создавать эффект полета в галактике, такой фон отлично подойдет для портфолио или целевой страницы сайта.
Мы добавили небольшую текстовую анимацию, с помощью которой можно создать больший эффект «живой» страницы, в чем вы можете сами убедиться, и так, давайте приступим:
Шаг 1. HTML
Для начала, нам необходимо реализовать самое простое, и именно оно будет выполнять большую часть поставленной задачи, речь идет о подключении видео на сайте, для этого у нас будет достаточно простая разметка:
<div class="overlay">
<div class="wrapper">
<br><br><br><br><br><br><br><br>
<h1>Vavik96</h1>
</div>
</div>
<video src="http://marshall-design.com/codepen/among_the_stars.mp4" autoplay loop>
</video>
Также мы добавили подпись, которая будет мерцать, для нее мы будем использовать отдельные классы и подключить сторонний шрифт из репозитория.
Шаг 2. CSS
Так как видео мы уже подключили к странице, осталось дело за малым, а именно его стилизовать, нам необходимо, для начала, определить параметры контейнера, затем мы определяем стили для самого видео:
/*********************
Контейнер
*********************/
.wrapper{
width:500px;
margin:0 auto;
}
/*********************
HTML Видео
*********************/
video {
width:100% !important;
height:auto !important;
}
/*********************
Контейнер
*********************/
.wrapper{
width:500px;
margin:0 auto;
}
/*********************
Анимация текста
*********************/
@-webkit-keyframes glow{
50%{
color:rgba(255,255,255,0.8);
text-shadow:rgba(255,200,255,1) 2px 1px 30px;
}
100%{
color:rgba(255,255,255,0.4);
}
}
@-moz-keyframes glow{
50%{
color:rgba(255,255,255,0.8);
text-shadow:rgba(255,200,255,1) 2px 1px 30px;
}
100%{
color:rgba(255,255,255,0.4);
}
}
@-o-keyframes glow{
50%{
color:rgba(255,255,255,0.8);
text-shadow:rgba(255,200,255,1) 2px 1px 30px;
}
100%{
color:rgba(255,255,255,0.4);
}
}
@-ms-keyframes glow{
50%{
color:rgba(255,255,255,0.8);
text-shadow:rgba(255,200,255,1) 2px 1px 30px;
}
100%{
color:rgba(255,255,255,0.4);
}
}
@keyframes glow{
50%{
color:rgba(255,255,255,0.8);
text-shadow:rgba(255,200,255,1) 2px 1px 30px;
}
100%{
color:rgba(255,255,255,0.4);
}
}
Как вы заметили мы добавили эффект анимации для текста, это позволит нам оживить нашу надпись. На этом все. Надеюсь урок был Вам интересен.