Package Exports

paroller.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (paroller.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, Alveus

Install

Before closing </body> element include:

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