Minimal jQuery Plugin To Reveal Content On Scroll - Easy Reveal
File Size: | 7.94 KB |
---|---|
Views Total: | 2767 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.