- Developed for modern browsers
- An open-source project by Julian Lloyd
Please use which ever is more comfortable:
- Download ZIP
git clone https://github.com/julianlloyd/scrollReveal.js.git
bower install scrollReveal.js
Once you’ve got scrollReveal.min.js
into your project’s 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>
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>
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.)