Create Header Video Parallax Scrolling Effect with CSS

A parallax scrolling thing you may implement many times before but how about making a video as a background and then create an awesome looking parallax effect?

I mean to say if we make parallax using video as a background instead of an image? That is something amazing and if we do it by just using CSS purely that it would be superb.

We are going to build video parallax instead of using an image. We will place a full height video on the header of the page and when user scroll they can see the parallax effect. The video will be autoplay and added using the video element.

I already write an article about How to Make Parallax Background Video that has full page video work as background. But in this tutorial, We are going to place a video at the top of the page and then define a content area underneath. I am going to do something amazing, and I am sure you like it.

Before I get started, I would like to explain to you the process of doing scrolling video. The video will place in the header and the position will be fixed. It allows you to add content to the video.

We put content area below to the video. When a user scrolls the page, It gives you a parallax effect and shows you more content.

Let’s start making this effect by using HMTL/CSS.

Let’s Build Video Parallax Scrolling Effect with CSS

We define two different sections each for video and content. We called one main wrapper for video and then place the video HTML element inside the figure element.

A video is using simply HTML5 video tag.

<div class="hero-wrapper">
    <figure>
      <video loop muted="muted" autoplay>
        <source src="https://assets.yesstud.io/studioblvd/video/studioblvd_420.mp4"/>
      </video>
    </figure>
</div>
<div class="stretch">
  <div class="codecontainer">
  <h1>Some heading</h1>
  <p>Content Goes Here..</p>
    </div>
</div>

The content area is simply a div with class name stretch. Later on, I will explain to you the styling of that div.

The Styling

Before I explain your main styling of scrolling video. You make sure to add box-sizing and 100% width/height for the body.

Step #1

* {
  font-family: "Open Sans";
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Step #2

Alright now let’s start with the main styling of parallax video. You can see that our main wrapper has fixed the position with its bottom/right is zero.

We also require to make it’s width/height to be auto but min-height and min-width should be 100 Percent.

.hero-wrapper {
  position: fixed;
  bottom: 0;
  right: 0;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -9999;
}

Step #3

After the implementation of the main container, We need to work on figure element that place inside the wrapper. We need to set its position relative.

If you want to place any other content on the video then you need to set position to absolute.

There is another way to place content on video is that, you can define separate section above the video wrapper just like I have defined in the demo with HMTL element header and class name .codeconveyHeader

Step #4

.hero-wrapper figure {
  margin: 0;
  position: relative;
}
.hero-wrapper figure h1 {
  position: absolute;
  top: 20px;
  left: 20px;
  border-right: 3px solid #fff;
  padding: 5px 10px 5px 5px;
}

Step #5

Finally, We need the video to be responsive and work well on resizing so we make the video width and max-width to 100%.

.hero-wrapper video {
  width: 100%;
  max-width: 100%;
}

Step #6

In the end, we set the content area. To do so, we need to set min-height and min-width to 100% and margin-top: 800px;. The margin-top is an excellent thing here. It allows you to show how much parts of a video.

If you remove it, then the video will show according to how much content added in the video. You can only say that I will work with auto height.

If you don’t want to show most of part of the video, then you can decrease its margin. You can set it as you want.

.stretch {
  height: auto;
  background: #F72B2B;
  min-height: 100%;
  min-width: 100%;
  background-size: cover;
  margin-top: 800px;
}
.stretch h1 {
  padding: 20px;
}

That’s it, Guys! Nothing else need to do here but just need to enjoy by implementing this solution on your website. Are you planning to make some nice parallax scrolling website then this tutorial may be the best resource for you?

You add some sections of parallax images, some with the background color and a parallax video one too. Such kind of combinations will make your site look awesome in design and unique to others.

Tags: Parallax Background