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 image cap

Card vertical

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

Card image cap

Card vertical

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

Card image cap

Card vertical

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

Card image cap

Card vertical

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

Card image cap

Card vertical

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

Card image cap

Card vertical

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

Card image cap

Card vertical

Card image cap

Card vertical

Hola, horizontal Parallax!

data-paroller-factor="0.5"

Maybe some horizontal scrolling with repeated background?

data-paroller-factor="-0.75"

Card image cap

Card horizontal

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

Card image cap

Card horizontal

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

Card image cap

Card horizontal

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

Card image cap

Card horizontal

Card image cap

Card horizontal