Revealing Elements on Scroll with jQuery - scrollReveal

File Size: 2.93 KB
Views Total: 11460
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="//"></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.


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.