paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements.
Before closing </body> element include jQuery and paroller.js.
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.paroller.min.js"></script>
| a) |
<div class="my-paroller" data-paroller-factor="0.3" data-paroller-type="foreground"
data-paroller-direction="horizontal"></div>
|
| b) | <div id="my-element"></div>
|
| a) | $('.my-paroller').paroller(); |
| b) | $("#my-element").paroller({ factor: 0.5, factorXs: 0.2, type: 'foreground', direction: 'horizontal' }); |
$ npm install paroller.jsrequire('paroller.js');
$ yarn add paroller.js
$ bower install paroller.js
To enable 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.
Since 'factor' is multiplier it must be set for paroller.js to have parallax effect.
<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
factorXs: 0.1, // multiplier for scrolling speed and offset
type: 'foreground', // background, foreground
direction: 'horizontal', // vertical, horizontal
transition: 'transform 0.2s ease-in' // CSS transition
});
<div data-paroller-factor="-0.1"
data-paroller-factor-xs="0.1"
data-paroller-type="foreground"
data-paroller-direction="vertical">
Awesome element with parallax effect
</div>
// initialize paroller.js
$("[data-paroller-factor]").paroller();
| data-paroller-factor | Sets 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 set the default value is 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>
|
| data-paroller-transition | Sets CSS transition on elements with paroller type set to foreground. If not used the default value is set to: translate 0.1s ease. <div data-paroller-type="foreground" data-paroller-transition="all 0.2s ease-in"></div>
|
// initialize paroller.js and set attributes for selected elements
$(".paroller, [data-paroller-factor]").paroller({
factor: 0.3, // multiplier for scrolling speed and offset
factorXs: 0.1, // multiplier for scrolling speed and offset if window width is <576px
factorSm: 0.2, // multiplier for scrolling speed and offset if window width is <=768px
factorMd: 0.2, // multiplier for scrolling speed and offset if window width is <=1024px
factorLg: 0.3, // multiplier for scrolling speed and offset if window width is <=1200px
type: 'foreground', // background, foreground
direction: 'horizontal' // vertical, horizontal
transition: 'transform 0.1s ease' // CSS transition, added on elements where type:'foreground'
});