Revealing Elements on Scroll with jQuery - scrollReveal

scrollReveal is a jQuery plugin that detects when elements become visible in viewport so that you can apply any cool CSS3 animations to them as you scroll down the page.

See also:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
• jQuery Plugin To Animate Content As User Scrolls - scrollex
• jQuery Plugin To Animate Elements When They Scroll Into View - inview
• Simple jQuery Plugin To Animate Html Elements On Scroll - jScrollability

How to use it:

1. Load the latest version of jQuery library and the jQuery scrollReveal plugin at the bottom of the webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.scroll-reveal.js"></script>

2. Add the necessary class 'js-reveal' to your elements like so:

<h1 class="js-reveal">jQuery scrollReveal</h1>

<h2 class="js-reveal">Lorem ipsum</h2>

<p class="js-reveal">...</p>

3. Initialize the plugin.

$.fn.scrollReveal();  

4. Apply custom effects to the elements when they're scrolled into viewport.

.js-reveal {
  ...
}

.js-reveal--hidden {
  ...
}

---

This awesome jQuery plugin is developed by RCopeland. For more Advanced Usages, please check the demo page or visit the official website.