Search code examples
javascripthtmlcssparallax

What CSS effect is this?

I've come across a sticky video background effect online.

I'm trying to replicate this on my website. But I'm finding it very difficult to begin without knowing what the effect is called.

If you watch this video: https://share.viewedit.com/i1QaiuzeT3o8T9YEM7ppnR you will see the effect.

Few questions that will help me with my task.

Q1. What is the name of this effect? Q2. Is this possible just with CSS?

Solution

  • Hmm, that's a really good question. For the type of parallax, I'm pretty sure it's just called a "sticky" background. As to how this is accomplished, it seems to be something like this...

    <div class="video-bg-spacer">
//An empty div with a transparent background the will serve as a "view window" for the video
</div>
//At the bottom of you code...
<div class="video-container">
    <video class="background-video" autoplay="autoplay" loop="loop" muted="muted">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
    </video>
</div>

    The background video will have css like this:

    .background-video {
  height: 100%;
  margin: 0 auto;
  position: fixed;
  z-index: -100;//underneat everything
  background-attachment: fixed;
  top: 0;
  left: 0;
}
.video-bg-spacer {
   background: transparent;
   height: 100vh;
}

    Here's an example.

    https://codepen.io/jacob_124/pen/QvRLXG?editors=0100

    I have checked the code from the example you showed and this is indeed how they accomplish it... The reason you want your video at the end of everything is so that the images on your page load before the video.