Enable Animations When Content Comes Into View - jQuery scroll-animate.js

Yet another jQuery plugin for the scroll-triggered element reveal effect that animates the desired elements when they come into view using CSS3 animations. Works perfect with the famous Animate.css CSS3 animation library.

How to use it:

1. Load the Animate.css in the document for the awesome CSS3 powered animations.

<link rel="stylesheet" href="/path/to/animate.min.css">

2. Specify the animation type and config the delay & duration in seconds for each element you want to animate on scroll.

<div class="container"
  <h1 class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.1s'>Title 1</p>
  <h2 class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.2s'>Title 2</p>
  <p class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.3s'>More Description</p>
</div>

3. Load jQuery library and the jQuery scroll-animate.js script at the end of the html document so the pages load faster.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src='src/jquery-scroll-animate.js'></script>

4. Load jQuery library and the jQuery scroll-animate.js script at the end of the html document so the pages load faster.

$('.container').jqueryScrollAnimate({

  // loop animation
  direction:true,

  // distance to trigger the animation
  distance:0,

  // CSS selector
  animated:'.ani'

})

Change log:

2017-06-01

• JS update

---

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