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>