Download

paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect.

You can use it on elements with background property or on any other element.
While scrolling elements can move: vertical, horizontal, ~~diagonal~~.
Manipulated through html data-* attributes.
Mobile ready.
Easy to use.

GitHub Download

Install

Before closing </body> element include:

1. jQuery library: jQuery <script src="jquery-3.1.1.min.js"></script>
2. jquery.paroller.js: Paroller <script src="jquery.paroller.min.js"></script>
3. Use: $("element").paroller();
$(window).paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });

Bower

$ bower install paroller.js

Usage

To enable parallax scrolling effect on element you have to use data-paroller-factor attribute on selected element.
data-paroller-factor sets speed and distance of element's parallax effect on scroll.
<div data-paroller-factor="0.3"></div>

Via data attributes

data-paroller-factor: This attribute is necessary to enable parallax scrolling effect.
It sets elements offset and speed. It can be positive (0.3) or negative (-0.3). Less means slower.
<div data-paroller-factor="0.3"></div>
data-paroller-type: This attribute is optional.
It has two values background and foreground.
If not used the default value is set to: background.
<div data-paroller-factor="0.3" data-paroller-type="foreground"></div>
data-paroller-direction: This attribute is optional.
It has two ~~three~~ values vertical, horizontal, diagonal.
If not used the default value is set to: vertical.
<div data-paroller-factor="0.3" data-paroller-direction="horizontal"></div>

Via JavaScript

                        $(window).paroller({
                            factor: 0.3,            // multiplier for scrolling speed and offset
                            type: 'foreground',     // background, foreground
                            direction: 'horizontal' // vertical, horizontal, TODO: diagonal
                        });

Hello Parallax!

data-paroller-factor="0.5"

Scrolling is fun!

data-paroller-factor="-0.15"

Card vertical

data-paroller-factor="0.5" data-paroller-type="foreground"

Card vertical

data-paroller-factor="0.1" data-paroller-type="foreground"

Card vertical

data-paroller-factor="-0.1" data-paroller-type="foreground"

Card vertical

data-paroller-factor="0.9" data-paroller-type="foreground" data-paroller-direction="vertical"

Card vertical

data-paroller-factor="0.15" data-paroller-type="foreground" data-paroller-direction="vertical"

Card vertical

data-paroller-factor="-0.1" data-paroller-type="foreground" data-paroller-direction="vertical"

Card vertical

Hola, horizontal Parallax!

data-paroller-factor="0.5"

Maybe some horizontal scrolling with repeated background?

data-paroller-factor="-0.75"

Card horizontal

data-paroller-factor="-0.3" data-paroller-type="foreground" data-paroller-direction="horizontal"

Card horizontal

data-paroller-factor="-0.1" data-paroller-type="foreground" data-paroller-direction="horizontal"

Card horizontal

data-paroller-factor="0.1" data-paroller-type="foreground" data-paroller-direction="horizontal"