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

Horizontal/Vertical Parallax Scrolling Effects In jQuery - paroller.js
File Size: 17.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

paroller.js is a jQuery plugin that applies horizontal/vertical parallax scrolling effects to background or foreground of any DOM elements. 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="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="dist/jquery.paroller.js"></script>

2. Initialize the plugin and we're ready to go.


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"
<div data-paroller-factor="-0.1" 

4. You can also pass the options via JavaScript.

  factor: 0, // - to +
  factorXs: 0, // - to +
  factorSm: 0, // - to +
  factorMd: 0, // - to +
  factorLg: 0, // - to +
  factorXl: 0, // - to +
  type: 'background', // foreground
  direction: 'vertical' // horizontal



  • v1.4.0 - data attributes with media queries added


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


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


  • v1.3.0


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