Мы уже не раз рассматривали интересные варианты реализации фонового видео с различными эффектами, каждый по своему уникальный и мы не могли обойти его

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


Мы добавили небольшую текстовую анимацию, с помощью которой можно создать больший эффект "живой" страницы, в чем вы можете сами убедиться, и так, давайте приступим:

Шаг 1. HTML
Для начала, нам необходимо реализовать самое простое, и именно оно будет выполнять большую часть поставленной задачи, речь идет о подключении видео на сайте, для этого у нас будет достаточно простая разметка:

rudebox

Также мы добавили подпись, которая будет мерцать, для нее мы будем использовать отдельные классы и подключить сторонний шрифт из репозитория.


Шаг 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);
}
}

Как вы заметили мы добавили эффект анимации для текста, это позволит нам оживить нашу надпись. На этом все. Надеюсь урок был Вам интересен.

Вот и все. Готово!