Revealing Elements on Scroll with jQuery - scrollReveal

Revealing Elements on Scroll with jQuery - scrollReveal
File Size: 2.93 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.