<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Видео фон для сайта

Видео фон для сайта

На этом уроке мы научимся устанавливать на сайт видео фон во всю ширину экрана. Обычно такие видео фоны служат вместо статичного фона в верхней секции сайта. Это хорошо работает на промо-страницах, где видео - интерактивное средство пиара товара или услуги.

Откуда взять качественное, короткое и желательно бесплатное видео? Сегодня мы познакомимся с замечательным ресурсом http://www.coverr.co, откуда можно скачать бесплатно, тематические видео-ролики для дальнейшей вставки на сайт, видео файлы уже специально подготовлены в нужных форматах, которые понимают все браузеры. Скачайте архив и поместите папку video в ваш существующий проект или в новую разработку. Я выбрал видео-ролик с названием - amalfi.


Как установить видео фон на сайт

Первым делом надо скачать jQuery плагин vide.js с сайта: http://vodkabears.github.io/vide/, из папки dist перетащить файл jquery.vide.min в папку js своего проекта.

HTML код

Создадим собственный HTML файл с одной секцией, внутри которой заголовок и один абзац, этот контент не играет никакой роли, это значит, что в теге section может быть любое содержание. В нашем случае имеет значение сама секция, как контейнер для видео фона и дата-атрибут data-vide-bg, который берёт видео под названием amalfi из папки video и загружает его на сайт.

<section data-vide-bg="video/amalfi">
    <h2>Отдых в Амальфи</h2>
    <p>приморский город в итальянской провинции Салерно.</p>
</section>

В вашем проекте должно быть четыре файла, названия первых двух могут быть любые и вы создаёте их сами. Последние два файла надо скачать, их мы вообще не трогаем, а только подключаем к HTML странице:

  • index.html - страница с видео фоном
  • style.css - CSS стили
  • jquery.min.js - библиотека jQuery
  • jquery.vide.min.js - плагин видео фона

Подключение CSS и JS

/* подключить в хедере */
<link rel="stylesheet" href="css/style.css">
/* подключить перед закрывающимся тегом body */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.vide.min.js"></script>

Библиотеку jquery.min.js мы не стали скачивать, а воспользовались альтернативой - прописали ссылку, откуда она будет подгружаться.

CSS код

Видео уже будет загружаться в виде фона, но для красоты без стилей никак не обойтись. Все поля и отступы мы обнулили, иначе сверху вы увидите белую полосу и поставили высоту секции - 100vh, этот значение обеспечивает адаптивность. Остальные свойства - чисто оформление.

* {
    margin: 0;
    padding: 0;
  }

section {
    color: white;
    font-family: "Source Sans Pro", sans-serif;
    height: 100vh;
  }

h2 {
    font-size: 2.5em;
    padding-top: 5%;
    padding-left: 5%;
    font-weight: 900;
    text-transform: uppercase;
  }

p {
    font-weight: 400;
    font-size: 1.2em;
    padding-left: 2%;
  }

Мобильные устройства

На разрешении экрана менее 768 пикселей, видео не будет загружаться, а вместо него загрузим картинку. Скорость мобильного интернета медленнее, поэтому добавим следующий код в наш файл стилей.

/* вставить картинку вместо видео фона */
@media (max-width: 767px) {
section {
    background-image: url("../video/amalfi.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
/* выключить видео фон */
[data-vide-options]{
    muted: true;
}}

Полезный совет

Для размещения изображений на видео фоне, используйте абсолютное позиционирование и свойство z-index.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.