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

Animation
Demo    Download
Horizontal-Vertical Parallax Scrolling Effects In jQuery - paroller
File Size: 3.15 KB
Views Total: 189 views
Last Update:October 2, 2020
Publish Date: October 2, 2020
Official Website: Go to website
License: MIT

Free jQuery Plugins with paroller.js is a 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.
A lightweight jQuery plugin that enables parallax scrolling effect

  • 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
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


Nola Arney

Nola Arney is a full stack web developer who has worked at companies of various shapes and sizes, and with technologies just as diverse. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.