🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Animator is a super lightweight jQuery plugin that applies CSS3 animations (with variable animation speed) to any DOM elements using Animate.css library.

animatecss

Documentation

jquery.animator.js with animate.css

Jquery plugin for animate.css.

Demo page

Jquery for Animator.css https://zugoripls.github.io/animate-css-jquery/.

Installation

To use jquery.animator.js in your project you must firstly need Animate.css and jquery.

Download

Download in .zip.

Basic Usage

Example to include in your documents.

<!-- animate.css --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">  <!-- animate.css --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <!-- jquery --> <!-- jquery.animator.js --> <script src="src/dist/jquery.animator-beta.min.js"></script> <!-- jquery.animator.js -->

Adding animation to HTML elements. At first, you should read how to use animate.css.

Animating with animate.css

Here are a simple example of how to animate a h1 tag.

<h1 class="animated bounceInDown">HELLO WORLD</h1> 

Add infinite class to keep animating till to the end of the world.

<h1 class="animated bounceInDown infinite">HELLO WORLD</h1> 

Animating with animate.css + jquery.animator.js.

First, add animated class in the element.

<!-- HTMl --> <h1 class="animated" id="greeting">HELLO WORLD</h1> <!-- HTMl --> 

Second, add one of the various animator class with the help of animate.css + jquery.animator.js like ...

<script> 	$('#title-lg').addAnimation('lightSpeedIn'); </script> 

You May Also Like