Animate Html Elements with jQuery and animate.css - Animate-Plus.js

Animate-Plus.js is a jQuery plugin worked with animate.css that allows you to apply multiple cross-browser CSS3 animations on any Html elements.

All the animation options can be passed through Html5 data-animation-* attributes so you can create awesome animations without having to write any Javascript.

Basic Usage:

1. Include the required jQuery javascript and animate.css in your document.

<link rel="stylesheet" href="css/animate.css" />
<script src="jquery.min.js"></script>

2. Make sure to include the animate-plus.js after jQuery library.

<script type="text/javascript" src="animate-plus.js"></script>

3. Create an Html element with a CSS class of 'animate-plus' and define the CSS3 animations using data-animation-* attributes. All the animation types can be found in animate.css.

<span class="animate-plus" data-animations="bounceIn,shake,fadeOutRight,fadeIn">Animate-plus.js</span>

4. All the Html5 data-animation-* attributes.

• data-animations: List of comma delimited animation names. By default the animations are executed from left to rigth. Valid values are animate.css class names. This is the only required attribute.
• data-animation-group: Name of the animation group. You can group animated elements using this attribute. Please refrain from using names that begin with an underscore (_), that's reserved for internal use.
• data-animation-order: List of comma delimited integer values. You can override the order of animation inside a group using the attribute.
• data-animation-duration: List of comma delimited duration values. This attribute will set the duration for the specified animations. For valid values see animation-duration css property.
• data-animation-delay: List of comma delimited delay values. This attribute will set how many time to wait before executing the animations. For valid values see animation-delay css property.
• data-animation-when-visible: Animate group only when visible on screen (binds on scroll and resize). This will begin animation as soon as one group element is visible. Valid value is true.
• data-animation-reset-offscreen: Reset animation when group goes off screen. The group will be reseted as soon as one group element goes off screen. This attribute only has effect when used together with data-animation-when-visible. Valid value is true.
• data-animation-repeat: Loop animation group indefinitely. Valid value is true.

Changelog:

2015-10-09

• Bug fix

---

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