Awesome Reveal Animation With jQuery And CSS3

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.