Smooth Video & Image Parallax With jQuery and CSS3 – jarallax

Jarallax is a dependency-free smooth video & image parallax scrolling. It is built with pure JavaScript and CSS3 so you can modify the styling and appearance of the plugin according to your requirements. There are various types of predefined options and you can apply these easily to modify the plugin.

Features:

• Supports image and video.
• YouTube, Vimeo and Self-hosted videos parallax supported.
• Easy to use, no extra effort is needed.
• Supported on all modern browsers and devices.
• Works smoothly with CSS3 transitions.
• Can disable the parallax effect on mobile devices.

Install with npm

npm install jarallax --save

import {
    jarallax,
    jarallaxVideo
} from 'jarallax';

jarallaxVideo();

How to use it:

1. Include the Javascript jarallax.min.js at the bottom of the web page.

<script src="path/to/jarallax.min.js"></script>

2. Include the CSS jarallax.css in the header of the page.

<link rel="stylesheet" href="path/to/jarallax.css">

Or you can alternatively add the CSS to your existing .css file.

.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;
}

3. Add the basic HTML to the page.

<!-- 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>

4. Initialize the plugin and we’re ready to go.

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

Background video with data attribute

<!-- 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 Self-Hosted 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>

Background video with JavaScript

import { jarallax, jarallaxVideo } from 'jarallax';
jarallaxVideo();

jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2,
    videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});

<div class="jarallax"></div>

Plugin’s default options:

Disable on mobile devices

jarallax(document.querySelectorAll('.jarallax'), {
    disableParallax: /iPad|iPhone|iPod|Android/,
    disableVideo: /iPad|iPhone|iPod|Android/
});

Or using function. Example:

jarallax(document.querySelectorAll('.jarallax'), {
    disableParallax: function () {
        return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
    },
    disableVideo: function () {
        return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
    }
});

Options For Video

Required jarallax/jarallax-video.js file.

Options For Element Parallax

Required jarallax/jarallax-element.js file.

Events

onScroll event

jarallax(document.querySelectorAll('.jarallax'), {
    onScroll: function(calculations) {
        console.log(calculations);
    }
});

Methods

Call methods

jarallax(document.querySelectorAll('.jarallax'), 'destroy');

$('.jarallax').jarallax('destroy');