Digital

HTML Elements Scroll Reveal Animations

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.

HTML Elements Scroll Reveal Animations
Photo by Nathan da Silva / Unsplash

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.

Install scrollReveal.js

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:

<script type='text/javascript' src='path-to-file/scrollReveal.min.js'></script>
<script>
      window.scrollReveal = new scrollReveal();
</script>

Make sure you change path-to-file with the path to the JavaScript file.

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 can also add keywords and keyword values to the data-scroll-reveal attribute.

enter

Enter from the top, left, bottom or right.

<div data-scroll-reveal="enter top">You Are Using scrollReveal.js</div>

move

Move a certain amount of pixels (px).

<div data-scroll-reveal="move 25px">You Are Using scrollReveal.js</div>

over

The duration, in seconds, of your reveal animation.

<div data-scroll-reveal="over 1.5s">You Are Using scrollReveal.js</div>

after/wait

The duration, in seconds, before the reveal animation begins.

<div data-scroll-reveal="wait 1s">You Are Using scrollReveal.js</div>

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:

<div data-scroll-reveal="enter left and move 50px over 1.5s">You Are Using scrollReveal.js</div>You Are Using scrollReveal.js

Note: You can also add CSS classes to the HTML element.

Read more