Download

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

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

GitHub Download

Previous versions

Download v1.2.9

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: // initialize paroller.js $('.my-paroller').paroller();

// initialize paroller.js and set attributes $("#my-element").paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });

// define element <div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal"></div> <div id="my-element"></div>

npm

$ npm install paroller.js

npm and browserify

require('paroller.js');

Bower

$ bower install paroller.js

Yarn

$ yarn add paroller.js

Usage

To use paroller.js parallax scrolling effect you can use data-paroller-* attributes on selected elements or set values via jQuery. 'factor' sets speed and distance of element's parallax effect on scroll.

                    <div class="paroller"> Awesome element with parallax effect </div>

                    // initialize paroller.js and set attributes for selected elements
                    $(".paroller, [data-paroller-factor]").paroller({
                        factor: 0.3,            // multiplier for scrolling speed and offset
                        type: 'foreground',     // background, foreground
                        direction: 'horizontal' // vertical, horizontal
                    });

                    <div data-paroller-factor="-0.1"
                        data-paroller-type="foreground"
                        data-paroller-direction="vertical">
                        Awesome element with parallax effect
                    </div>

                    // initialize paroller.js
                    $("[data-paroller-factor]").paroller();

Via data attributes

data-paroller-factor: This attribute 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 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 hsd two values: vertical, horizontal.
If not used the default value is set to: vertical.
<div data-paroller-factor="0.3" data-paroller-direction="horizontal"></div>

Via JavaScript

                        // initialize paroller.js and set attributes for selected elements

                        $(".paroller, [data-paroller-factor]").paroller({
                            factor: 0.3,            // multiplier for scrolling speed and offset
                            type: 'foreground',     // background, foreground
                            direction: 'horizontal' // vertical, horizontal
                        });