2 Demos of vertical and horizontal jQuery parallax effect plug-in – paroller.js

Create horizontal and vertical parallax effect

I have shared quite a few plug-ins related to the parallax scrolling earlier. You may learn about these plug-ins here, here and in this page. A parallax tilt effect plug-in is also covered in this post.

The unique thing about the paroller.js plug-in (which is the topic of this post) is, it enables creating the vertical as well as horizontal parallax effect. Moreover, it is tiny in size; the only 2K minified version.

You may set different available options for parallax effect by using the JavaScript or data attributes. See demos below with both ways. The paroller is mobile friendly and quite easy to setup and use on your website.

Developer’s page Download plug-in

How to set up parallax effect plug-in?

You may install the plug-in via bower:

$ bower install paroller.js

Or after downloading the package from the above link, include the jquery.paroller.js file above the body closing tag for better performance:

<script src=”js/paroller/jquery.paroller.js”></script>

(Adjust the path as per your physical location)

Use the data-paroller-factor attribute in the element where you want to create the parallax effect. For example:

<div data-paroller-factor=”0.5″ data-paroller-type=”foreground”></div>

You may set the options by data attributes or JavaScript.

Initiate the plug-in:

$(window).paroller();

See the demos below with functional code.

A demo of horizontal parallax effect

In this example, the horizontal parallax scrolling effect is created for different elements. The first two images are given different values for the data-paroller-factor attribute.

  • For the first one data-paroller-factor=”0.6″
  • For the second: data-paroller-factor=”-0.64″

Both of these images are given the data-paroller-direction=”horizontal” attribute for the horizontal scrolling.

After these two elements, three cards are used that gets closer as you scroll down. Apart from using the data-paroller-factor and data-paroller-direction as in above two elements, the data-paroller-type=”foreground” is also used. Have a look:

jQuery parallax horizontal

Online demo and code

See the complete code on the demo page.

A demo of the vertical parallax effect

For this demo, the vertical parallax effect is created by using different values for the data-paroller-factor in different images/elements.

Have a look and also try resized page for mobile testing and see how images are adjusted and still parallax effect is there:

See online demo and code

An example of the markup with the factor:

        <div class="jumbotron text-center bg-faded my-5"

             style="background: url('http://lorempixel.com/1200/600/abstract/8') no-repeat center;"

             data-paroller-factor="0.7">

            <h1 class="heading-1 py-5 text-white">The vertical parallax!</h1>

            <p class="text-white">data-paroller-factor="0.7"</p>

        </div>

See the complete code with the cards markup on the demo page.