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

Animation
Horizontal-Vertical Parallax Scrolling Effects In jQuery - paroller
File Size: 3.15 KB
Views Total: 4050 views
Last Update:March 09, 2024
Publish Date: March 03, 2017
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

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

Table of Contents

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

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.4.7
  • v1.4.6
  • v1.4.5
  • v1.4.0
  • v1.3.1
  • v1.3.0
  • v1.2.9
  • v1.2.1
  • v1.2.0
  • 1.4.1

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins

You Might Also Like