Press "Enter" to skip to content

[Horizontal/Vertical] A Lightweight Parallax Scrolling Effect Using jQuery Plugin | paroller.js

A lightweight jQuery component that enables a parallax scrolling effect. You can use it on items with a background feature or on any other element. paroller.js is a jQuery extension that applies horizontal/vertical scroll effects to the background or foreground of any DOM element.

Features:

  • You can use it on items with a background feature or on any other element.
  • While scrolling elements can move: both vertically and horizontally
  • It’s tampered with by * HTML data– * attributes or jQuery options.
  • Mobile ready.
  • easy to use.

How to make use of it:

1. Include the principle JavaScript file after the most recent jQuery library like this:

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Paroller -->
<script src="/path/to/dist/jquery.paroller.js"></script>
<!-- Or From A CDN -->
<script src="https://cdn.jsdelivr.net/npm/paroller.js/dist/jquery.paroller.min.js"></script>

2. Initialize the plugin on the parallax aspect and finished.

$('.my-element').paroller();  

3. Add the next information attributes to the goal aspect:

<div class="my-element"
     data-paroller-factor="-0.1" 
     data-paroller-type="foreground"
     data-paroller-direction="horizontal"
>

4. You can even move the choices by way of 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'
});

Horizontal/Vertical Parallax Scrolling Effects, Paroller JS Plugin/Github


See Demo And Download

Official Website(tgomilar): Click Here

This superior jQuery/javascript plugin is developed by tgomilar. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *