/ Parallax

A lightweight jQuery plugin that enables parallax scrolling effect

A lightweight jQuery plugin that enables parallax scrolling effect

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

Install

Before closing </body> element include:

  1. View demojQuery
  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
});
                

GitHub