Video Parallax Scrolling Background with Javascript

Category: Parallax Scrolling | July 10, 2018
Video Parallax Scrolling Background
Author: nk-o
Official Page: Go to Website
Last Update: September 1, 2019
License: MIT

Video Parallax Scrolling Background: Are you looking for a solution for both image and video to create a parallax effect? The Jarallax.js plugin can do this job.

You can build mix sections of video and images then apply parallax effect. Not only this but you can also add content over both video/image layers.

This is an amazing plugin which allows you to build video Parallax Background Effect with CSS and HTML in no time. You can easily add the different section for image, content or video.

Not only this but also allow you to add youtube, Vimeo, Dailymotion or HTML4 video. You can define different layers for the different content type.

How to Create Video Parallax Scrolling Background

Included require files in the head

<!-- Jarallax -->
<script src="jarallax/dist/jarallax.min.js"></script>

<!-- Include it if you want to use Video parallax -->
<script src="jarallax/dist/jarallax-video.min.js"></script>

<!-- Include it if you want to parallax any element -->
<script src="jarallax/dist/jarallax-element.min.js"></script>

Setup your own HTML which is way simple and easy to do

<!-- Background Image Parallax -->
<div class="jarallax">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
    Your content here...
</div>

<!-- Background Image Parallax with <picture> tag -->
<div class="jarallax">
    <picture class="jarallax-img">
        <source media="..." srcset="<alternative_background_image_url_here>">
        <img src="<background_image_url_here>" alt="">
    </picture>
    Your content here...
</div>

<!-- Alternate: Background Image Parallax -->
<div class="jarallax" style="background-image: url('<background_image_url_here>');">
    Your content here...
</div>

These styles need to correct background image position before Jarallax initialized:

.jarallax {
    position: relative;
    z-index: 0;
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

It also supports different data attribute and to define the speed attribute, let’s have a look at the example code.

<div data-jarallax data-speed="0.2" class="jarallax">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
    Your content here...
</div>

The most important part is to add the video and you can do this as following

<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
    Your content here...
</div>

<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax-video="https://vimeo.com/110138539">
    Your content here...
</div>

<!-- Background Local Video Parallax -->
<div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
    Your content here...
</div>

Finally, don’t forget to init the parallax effect and you can do it in this way.

<script type="text/javascript">
	// object-fit polyfill run
	objectFitImages();
	/* init Jarallax */
	jarallax(document.querySelectorAll('.jarallax'));
	jarallax(document.querySelectorAll('.jarallax-keep-img'), {
		keepImg: true,
	});
</script>

 

You May Also Like

Leave a Comment