Horizontal/Vertical Parallax Scrolling Effects In jQuery - paroller.js

paroller.js is a jQuery plugin that applies horizontal/vertical parallax scrolling effects to background or foreground of any DOM element. Powered by CSS3 transforms and easily configurable via HTML5 data attributes.

How to use it:

1. Include the main JavaScript file after the latest jQuery library as this:

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Paroller -->
<script src="/path/to/dist/jquery.paroller.js"></script>
<!-- Or From A CDN -->
<script src="https://cdn.jsdelivr.net/npm/paroller.js/dist/jquery.paroller.min.js"></script>

2. Initialize the plugin on the parallax element and done.

$('.my-element').paroller();  

3. Add the following 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'
});

Changelog:

2020-10-02

• v1.4.7: bugfix

2019-01-30

• v1.4.6: transition fix

2019-01-25

• v1.4.5: fix: enable paroller.js only when scrolling, added CSS transition option

2018-09-21

• v1.4.4

2018-09-02

• v1.4.3

2018-06-24

• v1.4.2 - requestAnimationFrame added

2018-06-18

• v1.4.1 - Removed transform unset on page resize

2018-06-18

• v1.4.0 - data attributes with media queries added

2018-03-02

• Don't rewrite previously defined transitions - paroller.min.js added

2018-02-27

• fix for elements which already have a transform directive in css

2018-01-13

• v1.3.0

2017-10-04

• added requestAnimationFrame() on scroll

---

This awesome jQuery plugin is developed by tgomilar. For more Advanced Usages, please check the demo page or visit the official website.