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:
- jQuery
- jquery.paroller.js
npm
$ npm install paroller.js
Bower
$ bower install paroller.js
Yarn
$ yarn add paroller.js
Use
$('.my-paroller').paroller();
$("#my-element").paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });
<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
$(".paroller, [data-paroller-factor]").paroller({
factor: 0.3,
type: 'foreground',
direction: 'horizontal'
});
License
MIT