Устанавливаем фоновое видео на сайт на HTML5
Мы уже не раз рассматривали интересные варианты реализации фонового видео с различными эффектами, каждый по своему уникальный и мы не могли обойти его стороной, в данном уроке мы решили поделиться с Вами еще одним, достаточно интересным способом реализации фонового видео. В данном уроке мы покажем, как применить еще один слой на видео, и подерем достаточно интересный видео-ролик, который будет создавать эффект полета в галактике, такой фон отлично подойдет для портфолио или целевой страницы сайта.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Мы добавили небольшую текстовую анимацию, с помощью которой можно создать больший эффект «живой» страницы, в чем вы можете сами убедиться, и так, давайте приступим:
Шаг 1. HTML
Для начала, нам необходимо реализовать самое простое, и именно оно будет выполнять большую часть поставленной задачи, речь идет о подключении видео на сайте, для этого у нас будет достаточно простая разметка:
1 2 3 4 5 6 7 |
<div class="overlay"> <div class="wrapper"> <h1>rudebox</h1> </div> </div> <video src="/among_the_stars.mp4" autoplay loop> </video> |
Также мы добавили подпись, которая будет мерцать, для нее мы будем использовать отдельные классы и подключить сторонний шрифт из репозитория.
Шаг 2. CSS
Так как видео мы уже подключили к странице, осталось дело за малым, а именно его стилизовать, нам необходимо, для начала, определить параметры контейнера, затем мы определяем стили для самого видео:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/********************* Контейнер *********************/ .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); } } |
Как вы заметили мы добавили эффект анимации для текста, это позволит нам оживить нашу надпись. На этом все. Надеюсь урок был Вам интересен.
Вот и все. Готово!
Читайте также:
Опубликовал Cooper 19.10.2014 в 17:35, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |