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.
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:
(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>
Initiate the plug-in:
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:
See the complete code on the demo page.
A demo of 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:
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;"
<h1 class="heading-1 py-5 text-white">The vertical parallax!</h1>
See the complete code with the cards markup on the demo page.