I always wanted write about parallax and horizontal scrolling. Now i have got the chance to share with jinvertscroll.
jinvertscroll is an amazing jQuery plugin to scroll the contents of your webpage horizontally and it supports the major feature which all the developers care about, that is nothing but Responsiveness. It’s a lightweight plugin which allows you to move in horizontal with a parallax effect while scrolling down.
Using this plugin is so simple and easy, If you follow below steps it will be easier to achieve with no complications.
Firstly download jquery.js, jInvertScroll.js and CSS from the below mentioned link:
Then include the files in your project folder and by using <link> and <script> tags refer them in your HTML file.
Once the configuration is done create elements that you want to scroll, elements can be div, images or videos.
Assign the following styles to the elements that you want to scroll:
position:fixed;// position must always be fixed
bottom:0;//fix the element at bottom or top
width: nn px;//specify the width in pixels.
Order the layers using z-index property if there are many elements to be scrolled, and maintain the width of the elements so that the front element is wider than second element.
Finally call jinvertscroll in your java script by passing the elements as parameters in order as shown;
And you’re done.