Just Another Parallax

Smooth parallax scrolling effect for background images, videos. Code in pure JavaScript with NO dependencies + jQuery supported. YouTube, Vimeo and Self-Hosted Videos parallax supported.

Demo

Tested Browsers

• Latest browsers on Mac and Windows (Chrome, Firefox, Safari, IE11, Edge)
• Latest Chrome on Android
• Latest Safari on iOs

Sizes

File	Gzipped Size
jarallax.min.js
jarallax-video.min.js

Usage with WordPress

We made WordPress plugin to easily add backgrounds for content in your blog with all Jarallax features.

Demo: https://wpbackgrounds.com/

Download: https://wordpress.org/plugins/advanced-backgrounds/

Usage with React

Demo: https://codepen.io/_nK/pen/mddWddr

Getting Started

ES6

npm install jarallax --save

import {
    jarallax,
    jarallaxVideo
} from 'jarallax';

jarallaxVideo();

Note: in this way is not available jQuery and data-attribute automatic initialization. Use javascript call instead (Example).

Browser

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

CDN

Link directly from unpkg

<!-- Jarallax -->
<script src="https://unpkg.com/jarallax@1/dist/jarallax.min.js"></script>

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

Supported plugins

You can add these plugins before jarallax initialize.

• object-fit-images polyfill for object-fit styles;
• lazysizes lazy-load images with srcset support;

Set up your HTML

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

Additional styles

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

You can include it from dist/jarallax.css.

Call the plugin

A. Data attribute way

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

Note: You can use all available options as data attributes. For example: data-speed, data-img-src, data-img-size, etc…

B. JavaScript way

jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2
});

C. jQuery way

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

Background Video Usage Examples

A. Data attribute way

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

Note: for self-hosted videos required 1 video type only, not necessarily use all mp4, webm and ogv. This needs only for maximum compatibility with all browsers.

B. JavaScript way

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>

Elements Parallax Usage Examples

Since v1.9.0 there was an extension to allow transform specific elements. This feature is still available, but DEPRECATED. We recommend you to use laxxx library https://github.com/alexfoxy/laxxx. It is much more powerful and has a less code (in cases when you don’t want to add parallax backgrounds).

Options

Options can be passed in data attributes or in object when you initialize jarallax from script.

Disable on mobile devices

You can disable parallax effect and/or video background on mobile devices using option disableParallax and/or disableVideo.

Example:

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 (+ supported all default options)

Required jarallax/jarallax-video.js file.

Options For Element Parallax

Required jarallax/jarallax-element.js file.

Events

Events used the same way as Options.

onScroll event

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

Console Result:

{
    // parallax section client rect (top, left, width, height)
    rect            : object,

    // see image below for more info
    beforeTop       : float,
    beforeTopEnd    : float,
    afterTop        : float,
    beforeBottom    : float,
    beforeBottomEnd : float,
    afterBottom     : float,

    // percent of visible part of section (from 0 to 1)
    visiblePercent  : float,

    // percent of block position relative to center of viewport from -1 to 1
    fromViewportCenter: float
}

Calculations example:

Methods

Call methods example

A. JavaScript way

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

B. jQuery way

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

No conflict

If you already have global jarallax variable or jQuery.fn.jarallax, you can rename plugin.

A. JavaScript way

var newJarallax = jarallax.noConflict();

B. jQuery way

jQuery.fn.newJarallax = jQuery.fn.jarallax.noConflict();

For Developers

Installation

• Run npm install in the command line. Or if you need to update some dependencies, run npm update

Building

• npm run dev to run build and start local server with files watcher
• npm run build to run build

Linting

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors

Test

• npm run test to run unit tests

Real Usage Examples

• Skylith
• Khaki
• Godlike
• Youplay

Credits

Images https://unsplash.com/ Videos https://videos.pexels.com/