When calling ScrollReveal()
, you can pass it an options
object to change the default configuration.
ScrollReveal(options);
Fresh out of the box, ScrollReveal runs with these defaults
. This configuration is intentionally barebones, to serve as a blank canvas for your creativity!
You can do this as many times as you need, although just once in the <head>
after installation is typically enough for most projects, e.g:
<head>
<script src="https://unpkg.com/scrollreveal"></script>
<script>
ScrollReveal({ reset: true });
</script>
</head>
When calling the reveal()
method, you can also pass it an options
object. This will override the current default configuration, for that reveal target
only.
ScrollReveal().reveal(target, options);
This is your bread and butter! Target elements in your document, and specify options to create your reveal animations, e.g:
<h1 class="headline">
Widget Inc.
</h1>
<p class="tagline">
The perfect widgets.
<span class="punchline">Forever.</span>
</p>
ScrollReveal().reveal('.headline');
ScrollReveal().reveal('.tagline', { delay: 500 });
ScrollReveal().reveal('.punchline', { delay: 2000 });