Smooth parallax scrolling effect for background images using CSS transforms with graceful degradation for old browsers. Parallax plugin with NO dependencies. jQuery supported. Youtube, Vimeo and Local Videos parallax supported.

• IE9+
• Safari 5.1.7+
• Opera 12+
• Latest browsers on Mac and Windows (Chrome, Firefox, Safari, IE, Edge)
• Latest Chrome on Android
• Latest Safari on iOs

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

Demo: https://wp.nkdev.info/free-advanced-wordpress-backgrounds/

Download: https://nkdev.info/downloads/advanced-wordpress-backgrounds/

Include Jarallax plugin. Also include jQuery before jarallax if you want to use it.

Download scripts directly from this repository and link it in your HTML file

<!-- Jarallax -->
<script src='jarallax/jarallax.js'></script>

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

Link directly from cdnjs

<!-- Jarallax -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.7.3/jarallax.min.js'></script>

<!-- Include it if you want to use Video parallax -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.7.3/jarallax-video.min.js'></script>

npm: npm install jarallax -- save

Bower: bower install jarallax --save

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

Mandatory requirement for plugin works properly - the selected item should be NOT position: static (for ex. relative).

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

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

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

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

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

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

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

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

Note: for local videos required only 1 video type, not necessary use all mp4, webm and ogv. This need only for maximum compatibility with all browsers.

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

Required jarallax/jarallax-video.js file.

Evenets used the same way as Options.

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:

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

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

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

var newJarallax = jarallax.noConflict();

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

• Godlike
• Youplay
• InLove
• Flatness

Images https://www.pexels.com/ Local Video https://www.videezy.com/

Copyright (c) 2017 nK Licensed under the WTFPL license.