Infinte Scrolling with Scrollorama js
Posted By : Rajan Rawat | 22-Jan-2018
Scrollorama js Introduction
It is a latest and lightweight library of javascript for webpage scrolling. I thing you have seen the infinite scrolling event on some website specially on some social networking website this will help you make your website an infinte scroll. This has mainly three features
We basically use the vanilla js so there is no need of other dependencies like jQuery or angular js. Although the scrollama js is a polyfilled without support for any browsers.
How to import the Scrolloma js just follow given code below
How to Initializing plugin follow the given code below
A simple example for this
In this example i am going to create the three blocks for scrolling
Block one
Block two
Block
As in the above code you can see the three blocks are created so now we some put animations on these blocks using .animate method
scrollorams.animate('#title1',{ duration: 300, property:'zoom', end: 8 });
scrollorams.animate('#title2',{ duration: 600, property:'rotate', start:90,end:270 });
scrollorams.animate('#title3',{ duration: 600, property:'left', start:-800,end: 0 });
Explanantion of code
As in the above code you can see the .animate method has been used besides this i put some other effects as well in the code like duration, delay, property, start etc. These are some extra effects which makes impact double of your scrollama js.
Scrollama Effects
Height
By the help of this property you can change the height of an element
scrolloramas.animate('#title',{ duration: 300, property:’height’, start: ‘100’,end: ‘500’ });
Text Moving
By this you can move the text in any position
scrolloramas.animate('#title',{ duration: 300, property:'left’, start:-10000,end: 0 });
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.