jQuery background parallax plugin used for adding a smooth parallax scrolling effect to background images and Youtube/Vimeo videos using CSS3 transforms (translate3d). With a background-position fallback when CSS transforms are not 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

• Simple parallax
• Parallax with smooth scroll
• Parallax with full-height blocks
• Parallax with Scale and Opacity
• Video Parallax (Youtube and Vimeo)

Load jQuery(1.7+) and include Jarallax plugin

<!-- Jarallax -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='jarallax/jarallax.js'></script>

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

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

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

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

This need for correct show background image before Jarallax initialize end.

.jarallax {
  position: relative;
  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').jarallax({
    speed: 0.2
});

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

Evenets used the same way as Options.

$('.jarallax').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
}

Calculations example:

All demo images from https://www.pexels.com/

Copyright (c) 2015 _nK Licensed under the WTFPL license.