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

Horizontal/Vertical Parallax Scrolling Effects In jQuery - paroller.js
File Size: 17.2 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 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="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<!--Paroller-->
<script src="dist/jquery.paroller.js"></script>

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

$(window).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"
<div data-paroller-factor="-0.1" 
     data-paroller-type="foreground"
     data-paroller-direction="horizontal"
>

4. You can also pass the options via JavaScript.

$(window).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
});

Changelog:

2018-06-24

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.