Using scrollReveal.js, you can simply create animated HTML elements that fade-in, from all sides and over a certain amount of time. The animations you create are only triggered when the end user scrolls the web page.
You can install scrollReveal.js in three (3) different ways. The first way is to simply download it and upload it to your hosting account. The second way is to use Git:
git clone https://github.com/julianlloyd/scrollReveal.js.git
The third way is to use Bower:
bower install scrollReveal.js
Once you have it on your hosting account, you can add it to your website like so:
http://path-to-file/scrollReveal.min.js window.scrollReveal = new scrollReveal();
Make sure you change
How-to Use scrollReveal.js
To use scrollReveal.js, simply add
data-scroll-reveal to the HTML element:
<h1 data-scroll-reveal>You Are Using scrollReveal.js</h1>
You Are Using scrollReveal.js
You can also add keywords and keyword values to the
Enter from the top, left, bottom or right.
Move a certain amount of pixels (px).
The duration, in seconds, of your reveal animation.
The duration, in seconds, before the reveal animation begins.
Combine Different Keywords
You can also combine keywords and their values using a comma
, or using filler words: from, the, and, then, but, with.
An example of combining keywords and their values would look like this:
Note: You can also add CSS classes to the HTML element like I have done in the examples.