animate.css
jquery.animator.js withJquery 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.
animate.css
Animating withHere 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>
animate.css + jquery.animator.js.
Animating withFirst, 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>