Skip to content

Getting Started (v2.x)

Jump to bottom
Julian Lloyd edited this page Mar 4, 2020 · 7 revisions

Installation

Download ScrollReveal (.ZIP)

Once you’ve got scrollReveal.min.js into your JavaScript directory, let’s instantiate it!

<!DOCTYPE html>
<html>
  <body>  

    <!-- All your stuff up here... -->

    <script src='/js/scrollReveal.min.js'></script>
    <script>

      window.sr = new scrollReveal();

    </script>
  </body>
</html>

Basic Usage

How does it work? It’s as simple as adding data-sr to an element, it will reveal as it enters the viewport.

<p data-sr> Chips Ahoy! </p>

Taking Control

You guessed it, the data-sr attribute is waiting for you to describe the type of animation you want. It’s as simple as using a few keywords and natural language.

<div data-sr="enter left please, and hustle 20px"> Foo </div>
<div data-sr="enter bottom and move 50px after 1s"> Bar </div>
<div data-sr="wait 2.5s and then ease-in-out 100px"> Baz </div>

What you enter into the data-sr attribute is parsed for specific words:

  • Keywords that expect to be followed by a value. (e.g. move 50px)
  • Sugar (optional) for fun and comprehension. (e.g. and, then, please, etc.)

Recommended Next: Keywords →

📚 Docs

v3.x (2016)

v2.x (2015)

Clone this wiki locally