Submit your widget

Easy scroll animations for web and mobile browsers

Created 2 years ago   Views 8594   downloads 1067    Author jlmakes
Easy scroll animations for web and mobile browsers
View DemoDownload 12.1 KB
12
Share |

Easy scroll animations for web and mobile browsers

1.1. Installation

 

The simplest method is to copy paste this snippet just before your closing </body> tag.

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.6/scrollreveal.min.js"></script>

But you can also:

  • Download ZIP
  • npm install scrollreveal
  • bower install scrollreveal

    1.2. The Basics

The reveal() method is the primary API, and makes it easy to create and manage various types of animations.

<!-- HTML -->
<div class="foo"> Foo </div>
<div class="bar"> Bar </div>
// JavaScript
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');

1.3. Method Chaining

The ScrollReveal constructor, and it's primary methods all support chaining.

window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');

// Is the same as...
window.sr = ScrollReveal().reveal('.foo, .bar');

Read more:https://github.com/jlmakes/scrollreveal.js