paroller.js

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
• Manipulated through html data-* attributes or jQuery options
• Mobile ready
• Easy to use

DEMO: example page

Install

Before closing </body> element include:

1. jQuery
2. jquery.paroller.js

npm

$ npm install paroller.js

Bower

$ bower install paroller.js

Yarn

$ yarn add paroller.js

Use

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

<!-- select 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 and browserify

require('paroller.js');

Options

data attributes

You can control scrolling parallax effect by setting data-paroller-* values attributes or by setting JavaScript options.

data-paroller-factor sets speed and distance of element's parallax effect on scroll.

data-*	value	default value
data-paroller-factor	sets offset and speed. It can be positive (0.3) or negative (-0.3). Less means slower.	0
data-paroller-type	background, foreground	background
data-paroller-direction	vertical, horizontal	vertical

JavaScript

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

License

MIT