What is scrollReveal.Js?
scrollReveal.js is a library to easily reveal elements as they enter the viewport. It’s very small in size, as its weight is roughly 3Kb if minified and gzipped. It has no dependencies, so you don’t need to add other libraries to use it like jQuery. In addition to the nice effects it supports, what I really like about this library is that you can use natural language to define the animation you want to run.
Bower Install
bower install scrollReveal.js
Specifically, scrollReveal.js searches for elements on the page with an attribute named data-sr.
<body>
<div data-sr>This is the first div</div>
<div data-sr>This is the second div</div>
<div data-sr>This is yet another div</div>
</body>
By default scrollReveal.js lets your elements enter the viewport from the bottom of the page but you can change this effect on a per-element basis by using the enter keyword followed by the direction. So, you can write enter left. You can also specify how many pixels a given element has to be moved using the move keyword followed by the number of pixels, for example move 15px.
<div data-sr="please, can you enter left and then move 15px ?">This is the first div</div>
Video for ScrollReveal.Js
https://www.youtube.com/watch?v=gwxWmsw2rAo
