Animate Elements With Scroll Event Using CSS3 Animations - animateMePlz

animateMePlz is a lightweight yet customizable jQuery plugin for scrolling CSS animations that make any DOM element animate into the page as you scroll down the page.

The plugin makes uses of Animate.css to trigger CSS3 powered animations on specific DOM elements as they become visible within the viewport.

How to use it:

1. Load the necessary jQuery library and Animate.css from CDN.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

2. Load the minified version of the jQuery animateMePlz plugin after jQuery.

<script src="/path/to/animateMePlz.jQuery.min.js"></script>

3. Add the CSS class 'animateMePlz' to the element you want to animte on scroll.

<div class="animateMePlz">
  content here
</div>

4. Initialize the plugin and done.

$(function(){

  $(window).scroll(function() {
    $('.animateMePlz').animateMePlz();
  });

});

5. By default, the plugin will fade in the element as it is scrolled into view. You can change the default animation by overriding the value of the animationStyle option.

$('.animateMePlz').animateMePlz({
  animationStyle: 'fadeIn' // Animate.css class here
});

6. Customize the duration & delay of the animation.

$('.animateMePlz').animateMePlz({
  animationDelay: '.45s',
  animationDuration: '.5s'
});

7. Decide whether or not to repeat the animation if you scroll the page more than once.

$('.animateMePlz').animateMePlz({
  repeat: 'noRepeat' // default: 'repeat'
});

8. Customize the trigger point for the animation.

$('.animateMePlz').animateMePlz({
  threshold: 50 // 50px
});

9. You're also allowed to customize the plugin via data-option attributes:

<div class="animateMePlz"
     data-animationStylePlz="fadeIn"
     data-repeatPlz="Repeat"
     data-thresholdPlz="50"
     data-animationDelayPlz=".45s"
     >
  content here
</div>

---

This awesome jQuery plugin is developed by nandorojo. For more Advanced Usages, please check the demo page or visit the official website.