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.js
require('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' });