Revealing Elements with scrollReveal.js

CSS is the language we all use on the web to style websites since its creation in 1996. Today we're able to create awesome effects using CSS and it's becoming more powerful everyday thanks to the introduction of shapes, flex-box, and animations. This is of course true apart from the well-known joke that we can create animations but until few years ago we could not easily vertically center elements (and this is still true in some versions of Internet Explorer). Despite CSS being the language to accomplish certain tasks, from a long time now, JavaScript has been used to create nice animations. There are even entire JavaScript libraries dedicated to creating animations. In this article I'll cover one of these libraries named scrollReveal.js.

What's 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. We'll come back to this feature in a few moment, but first I want to show you a simple example of what this library can do for you: Nice, isn't it? And this demo is created with very few lines of code. The code for this demo is available as a JSFiddle. Now that I've hopefully interested you, let's proceed in an orderly fashion.

Getting Started with scrollReveal.js

In order to use scrollReveal.js in our web pages, we have to obtain a copy of the library. As usual this can be done either by downloading it from its GitHub repository, or through Bower using the following command:

bower install scrollReveal.js

Once downloaded, you have to include the library in your page by adding a script element as shown in the following code: [html] [/html]

Continue reading %Revealing Elements with scrollReveal.js%

by Aurelio De Rosa via SitePoint