A paroller.js is lightweight plugin that parallax scrolling effect on your web page. Free jQuery Plugins paroller.js is horizontal/vertical parallax effect on scroll with apply in background of any Div element. it powerd by CSS3 transforms and easily configurable via HTML5 data attributes.
- 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
Table of Contents
How to use :
1. Include the main JavaScript.
<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Paroller -->
<script src="/path/to/dist/jquery.paroller.js"></script>
2. Initialize the plugin on the parallax element.
$('.my-element').paroller();
3. Add the data
attributes to the target element:
- data-paroller-factor: scale factor
- data-paroller-type: “foreground” or “background”
- data-paroller-factor-sm: scale factor on small devices (<769px)
- data-paroller-factor-xs: scale factor on extra small devices (<576px)
- data-paroller-factor-md: scale factor on middle size devices (<1025px)
- data-paroller-factor-lg: scale factor on extra large devices (<1921px)
- data-paroller-direction: “horizontal” or “vertical”
- data-paroller-transition: CSS transitions
<div class="my-element"
data-paroller-factor="-0.1"
data-paroller-type="foreground"
data-paroller-direction="horizontal"
>
4. You can also pass the options via JavaScript.
$(".element").paroller({
factor: 0, // - to +
factorXs: 0, // - to +
factorSm: 0, // - to +
factorMd: 0, // - to +
factorLg: 0, // - to +
factorXl: 0, // - to +
type: 'background', // foreground
direction: 'vertical', // horizontal
transition: 'translate 0.1s ease'
});
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.