How to Make Parallax Background Video with CSS3 & JavaScript

You have given a try to parallax effect by using the images as background once in your life, right? But how about making a video as a background and create parallax animation?

Yep! that’s quite possible with JavaScript and CSS. Today, I’ll share with you a great plugin that helps you to build a parallax scrolling website.

This plugin allows you to add videos and photos both on the same page and then make a parallax effect. t supports the full range of features and allows us to do countless things.

You can define background images in different ways and also add videos as background. It allows making the video in parallax mode.

It is the smooth plugin and provides the effect for background images using CSS transforms with graceful degradation for older browsers.

It builds with jquery, but the plugin hasn’t dependencies. It supported HTML5 video, Youtube, Vimeo and other type of Iframe videos.

How to Make Parallax Background Video

It’s easy to implement, all you need to define the sections or div for each type of parallax you need. For example below is parallax for an image. The class jarallaxis required to add for any kind of effect.

<div class='jarallax' style='background-image: url(<background_image_url_here>)'>
    Your content here...
</div>

The plugin provides HTML5 title type attributes to control the effects. For example, in the below code, it hasdata-jarallax-video which allows defining video as a background instead of the image.

<div class="jarallax" data-jarallax data-jarallax-video="https://vimeo.com/110138539"></div>

You can control the speed by defining the data-jarallax

<div data-jarallax='{"speed": 0.2}' class='jarallax' style='background-image: url(<background_image_url_here>)'>
    Your content here...
</div>

Additional styles

Mandatory requirement for the plugin works correctly – The selected item should be NOT position: static (for ex. relative).

These styles need to add relative position and correct background image position before Jarallax initialize end.

.jarallax {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

JavaScript

The JavaScript also gives you controls to manage the effects and do the setting as you want. It allows the setting type of scroll, speed, and much more.

$('.jarallax').jarallax({
    speed: 0.2
});