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: 1506 views
Last Update:October 15, 2021
Publish Date: March 03, 2017
Official Website: Go to website
License: MIT
Plugin Author: tgomilar

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

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.