ScrollReveal Js A javascript library to reveal elements

ScrollReveal Js A javascript library to reveal elements DasJs

ScrollReveal Js is a library used to reveal elements when elements enter in the viewport. When you scroll a web page, then you can see the elements appear with some animations. It creates awesome effects. Today we create awesome effects using CSS but Javascript also has been used to create nice animation. There are lots of javascript libraries dedicated to creating animations. ScrollReveal.Js is one of them.

Features of ScrollReveal.Js

  1. It is very small about 3 KB in size.
  2. No dependency. No need to use any dependency js library like jQuery.
  3. Very easy to install
  4. Very simple coding syntax

Install ScrollReveal.Js

Firstly you need this library file. For this, You can download from its GitHub repositories. If you don't want to take it from GitHub you can also use Bower to download.

bower install scrollReveal.js

Now you have a library. You have to add this library in your project before closing tag of the body (</body>).

<script src="path/to/scrollReveal.min.js"></script>

It's time to make a web page animated. Actually, ScrollReveal Js searches elements having attribute "data-src'. So, you just add 'data-src' in all elements in which you want scrollReveal animation working. See the following example of code.

<body>
<div data-sr>first div to animate</div>
<div data-sr>second div to animate</div>
<div data-sr>yet another div to animate</div>
</body>

 

It's time to add a single line of javascript code to make this animation live.

new scrollReveal();

That's it. Run your page and see the magic.

Check out another example on jsfiddle: