Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание фонового видео, прокручивающегося вместе с содержимым

6 августа 2018 | Опубликовано в css | 11 Комментариев »

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

 

Основы прокручивания видео HTML5

Разметка начинается довольно похоже на пример из статьи о фоновом видео, но вместо того, чтобы разметить видео HTML5 в корне веб-страницы, т. е., прямо после открывающего тега <body>, оно располагается внутри элемента, в котором находится основное содержимое. Для этого примера предположим, что видео размещается внутри элемента шапки, в самом начале основного элемента:

<main>
  <header>
    <video autoplay loop>
      <source src="forest-fire.webm">
      <source src="forest-fire.mp4">
    </video>
  </header>

Используемое видео должно соответствовать основным правилам для фонового видео, указанным в вышеуказанной статье.

Видео заданы те же самые стили, которые задаются адаптивным полноширинным изображениям:

main {
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}
main > header video {
  width: 100%;
  height: auto;
}

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

В этом случае на видео наложен заголовок и приглашение прочитать связанную историю. Эти элементы располагаются сразу после элемента видео, внутри элемента шапки:

    <h1>A world Aflame</h1>
   <a href="#maincontent"></a>
</header>

Якорная ссылка перепрыгивает на элемент с идентификатором #maincontent, расположенный сразу за элементом шапки. После этого элемент шапки нужно настроить с помощью кода CSS, чтобы эти новые добавленные элементы можно было расположить послойно:

main > header {
  position: relative;
}

Код CSS для элемента первого заголовка и ссылки следующий:

main > header h1 {
  position: absolute;
  bottom: 40%;
  left: 1rem;
  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;
}

Стрелка, направленная вниз, выполняет короткую анимацию через пару секунд после загрузки страницы, приглашая пользователя прокрутить страницу вниз:

@keyframes downwardprompt {
  to {
    transform: translateY(2rem);
    opacity: 0;
    }
}

Вот и все. Результат можно увидеть ниже:

Естественно, существует много вариаций этого подхода, но основной код CSS, нужный для достижения этого эффекта, будет примерно таким же.

Использовано видео Bill Blevins, лицензированное по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Merziuz
    Thumb up Thumb down 0

    bWdNA7 pills2sale.com viagra online

    Ответить

  2. Luke
    Thumb up Thumb down 0

    Your cash is being counted veromax memory book The June protests, an unexpected outburst of discontent that shook Brazil's political establishment, led Congress to rush through an anti-bribery law and other measures to increase accountability. But on August 28, the lower house shocked the country by voting to allow Natan Donadon, a lawmaker jailed for embezzlement, to keep his seat while in prison.

    Ответить

  3. Lifestile
    Thumb up Thumb down 0

    Other amount prinivil drug card Based on the S4 Mini mobile, the S4 Zoom offers a 10x optical zoom, and from one side looks like a regular compact camera, of which Samsung make some excellent examples. The aim in combining the two is obvious – relieve the frustration of those terrible pictures that are taken by even modern smartphones, and connect a pcoket-size camera to a network so you can always share, edit and upload high quality images.

    Ответить

  4. Keenan
    Thumb up Thumb down 0

    Very funny pictures cvs n-acetyl cysteine The New England quarterback completed 22 of 46 passes for 228 yards, but was only one-for-12 on third-down passes. He was sacked four times and did not throw for a touchdown, while his New York rookie counterpart Geno Smith passed for one touchdown and ran for another.

    Ответить

  5. Garrett
    Thumb up Thumb down 0

    Some First Class stamps anavar only results forum Even though drug companies have agreements to license antiretroviral drugs on patents as generics, the therapies are not free and someone has to pay for them, he said. So the onus is on rich countries like Canada to chip in for global health. But that too has limits, and the only solution is a cure, Wainberg said, and in the meantime, the development of strategies that minimize infection risks.

    Ответить

  6. Mauricio
    Thumb up Thumb down 0

    Enter your PIN how to get doctor to prescribe xenical Porcello gets his first look at the Phillies, though Delmon Young (8 for 22), Ben Revere (7 for 19) and Michael Young (5 for 13) had success against him during their time in the AL. Delmon Young won the AL championship series MVP with the Tigers last season.

    Ответить

  7. Eric
    Thumb up Thumb down 0

    How much is a First Class stamp? redicalm walmart canada Former President Michelle Bachelet, the front-runner in the Nov. 17 presidential elections, favors legalizing abortion in cases of rape or risks to the health of the mother or the child. She spent the past several years heading the U.N. agency for women.

    Ответить

  8. Jerrold
    Thumb up Thumb down 0

    I work for a publishers paxil 5mg side effects "Understanding local trends in obesity and physical activity in both rural and urban areas will help communities develop successful strategies and learn from one another, " said Dr. Ali Mokdad of the University of Washington, who worked on both of the studies.

    Ответить

  9. Jordan
    Thumb up Thumb down 0

    Where's the postbox? pregnitude uk buy Villas-Boas had already moved to strengthen Spurs' options during the summer. However, the arrivals of men such as Paulinho, Etienne Capoue, Nacer Chadli, Romanian defender Vlad Chiriches, Roma forward Erik Lamela and Ajax playmaker Christian Eriksen as well as £26 million striker Roberto Soldado could not stop his new-look side from slumping to defeat in the north-London derby at Arsenal before the international break.

    Ответить

  10. Hector
    Thumb up Thumb down 0

    Do you know what extension he's on? lisinopril 20mg image As the House of Representatives assesses its strategy to overhaul the nation’s immigration system, a group of Republican congressmen are starting their August recess with a tour of the southern border.

    Ответить

  11. Kendrick
    Thumb up Thumb down 0

    Not available at the moment cost of lamictal at walmart Ducktales Remastered — August 13th (Playstation 3 & Nintendo WiiU & PC, Capcom, Rated E10) — This downloadable game is a remastered remake of the original Ducktales game on the Nintendo Entertainment System. With new 3D graphics as well as other new features and elements, players control Scrooge McDuck through levels to retrieve lost treasure. The game has the original voice talent from the hit 80s Disney animated series as well.

    Ответить

Оставить ответ


− 3 = четыре

Вставить изображение