Awesome Reveal Animation With jQuery And CSS3

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.

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.

  • Publication date: 26.09.2018
  • Source