Minimal jQuery Plugin To Reveal Content On Scroll - Easy Reveal

File Size: 7.94 KB
Views Total: 2763
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Plugin To Reveal Content On Scroll - Easy Reveal

Easy Reveal is a really small (less than 1kb) jQuery scroll-triggered animation plugin which can be used to fade in and rotate contents while scrolling. Fade and rotate animations based on CSS3 transitions and transforms.

How to use it:

1. The plugin requires the 'easy-reveal.css' to provide the default CSS3 powered animations.

<link rel="stylesheet" href="easy-reveal.css">

2. Specify the scroll animation you wan to use in the data-easy-reveal attribute as these:

<div data-easy-reveal="">
  <h2>fade-in-up</h2>
</div>

<div data-easy-reveal="fade-in-down">
  <h2>fade-in-down</h2>
</div>

<div data-easy-reveal="fade-in-left">
  <h2>fade-in-left</h2>
</div>

<div data-easy-reveal="fade-in-right">
  <h2>fade-in-right</h2>
</div>

<div data-easy-reveal="fade-in-rotate-x">
  <h2>fade-in-rotate-x</h2>
</div>

<div data-easy-reveal="fade-in-rotate-y">
  <h2>fade-in-rotate-y</h2>
</div>

3. Insert the latest version of jQuery library and the JavaScript file jquery.easy-reveal.js at the end of the document. Done.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery.easy-reveal.js"></script>

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