Awesome Reveal Animation With jQuery And CSS3
File Size: | 7.44 KB |
---|---|
Views Total: | 1980 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a small jQuery script that makes use of CSS3 animations to apply an awesome reveal effect to any DOM element.
How to use it:
1. Include the core stylesheet reveal.css
in the head
of the document.
<link rel="stylesheet" href="css/reveal.css">
2. Add the main class 'animated' and an animation class of your choice to the target elements. You can also specify the animation delay in the data-delay
attribute:
<div class="animated animation-LtoR" data-delay="10"> Left To Right </div> <div class="animated animation-RtoL" data-delay="1500"> Right To Left </div> ...
3. Include the needed jQuery JavaScript library at the bottom of the page.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script>
4. Activate the reveal animation on the elments.
$(document).ready(function () { $('.animated').each(function (index) { $(this).delay($(this).data('delay')).queue(function () { $(this).addClass('animate-in'); }); }); });
This awesome jQuery plugin is developed by Somsubhra1. For more Advanced Usages, please check the demo page or visit the official website.