Minimal jQuery Plugin To Reveal Content On Scroll - Easy Reveal

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.

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.

  • Publication date: 22.12.2017
  • Source