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: 342 views
Last Update:November 21, 2020
Publish Date: October 2, 2020
Official Website: Go to website
License: MIT

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