How to Make Parallax Background Video with CSS3 & Javascript

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

Yep! That’s quite possible with Javascript and CSS. Today I will share you a great plugin which help you to build aprallax scrolling website.

This plugin allow you to add video and photos both on the same page and than make parallax effect. t supports the full range of features and allows to do countless things.

You can define background images in different ways and also add video 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 another 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 below code, it hasdata-jarallax-video which allow 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 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 give 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
});