A world Aflame

▼
Part of the Scrolling Effects Reading List

Recently my Fullscreen HTML5 Background Video article has received a number of questions about how to achieve a “scrolling fullscreen video” effect: video that appears behind content, but which scrolls upwards with the rest of the page.

This surprised me a little, since the solution is a fairly straightforward use of CSS positioning combined with the styles typically used for fluid images… but sharing the solution does provide me with the opportunity to include a neat use of blend modes, so here goes.

Basic HTML5 Video Scroll

The markup starts up rather like my background video example, but rather than placing the HTML5 video in the root of the page (i.e. immediately after the opening <body> tag) it goes inside whatever contains your main content. For the purpose of this example, I’ll assume that the video is inside a <header> element at the start of a <main> tag: 

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

The video is styled in exactly the same way as full-width responsive images are: 

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

In this case the video is layered with a heading and a prompt to read the associated story. These elements go immediately after the <video> tag, inside the <header>: 

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

The anchor link jumps to an element with an id of maincontent, immediately underneath the <header> element. Next, the <header> has to be adjusted with CSS to allow these new added elements to be layered and positioned: 

main > header { 
  position: relative;
}

The CSS for the <h1> and the link: 

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;
}

The downwards arrow enters a brief animation a few seconds after the page loads, prompting the user to scroll: 

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

That’s it! Naturally, there are many variations of this technique, but the basic CSS should always be pretty much the same to achieve this effect.

Video by Bill Blevins, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/WQrPRY