jQuery Plugin For On-Scroll Animations using Animate.css - Animated

File Size: 7.79 KB
Views Total: 1532
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For On-Scroll Animations using Animate.css - Animated

Animated is a jQuery plugin that adds fancy animate.css powered CSS3 animations to html elements as they come into view on vertical page scrolling. All modern browsers which know CSS3 transitions are supported. IE 9 and below will simply ignore the transitions and show the content as is.

How to use it:

1. Load the required animate.css and the animated.css in the head section of your html page.

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

2. Add "animated" CSS class to the element that you want to animate.

<div class="animated"></div>

3. Add the animate.css's animation name that you like as a "data-animation" attribute to the element.

<div class="animated" data-animation="bounce"></div>

4. Load jQuery library and the jQuery animated.js at the end of the page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/animated.js"></script>

5. Initialize the plugin and we're ready to go.

$('.animated').animated({
  // options here
});

6. Customization opitons.

$('.animated').animated({

  // set your own class name for the animated element when in viewport.
  animatedIn: 'animated-in',

  // the animation delay in pixels
  offset: 0.8,

  // run the animation again as you scroll up and then down
  reverse: false,

  // run the animations on mobile devices
  mobileDisabled: true
  
});

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