jquery.animator.js with animate.css

Jquery plugin for animate.css.

Demo page

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>