jQuery Plugin For Custom CSS3 Powered Animations - k-animation

File Size: 278 KB
Views Total: 722
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Custom CSS3 Powered Animations - k-animation

k-animation is a simple to use jQuery plugin which allows to handle CSS3 based animations with custom delays, trigger events and callbacks. The plugin has the ability to apply custom animations to DOM elements using any CSS animation libraries such as Animate.css.

How to use it:

1. In this case, we're going to use Animate.css for CSS3 animations.

<link rel="stylesheet" href="/path/to/animate.min.css">

2. Include jQuery library and the jQuery k-animation plugin's script on the webpage.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="kAnimation.min.js"></script>

3. Apply a custom CSS3 animation to your element that will auto play on page load.

$('.el').kAnimation({
  ClassName: 'animated',
  Animation: 'fadeInUp',
});

4. Change the default trigger event.

$('.el').kAnimation({
  ClassName: 'animated',
  Animation: 'fadeInUp',
  Type: 'auto', // auto, scroll, click, hover
});

5. More configuration options with default values.

$('.el').kAnimation({
  Delay: '0',
  Forever: false,
  DelayForever: 0,
  ScrollLoop: false,
});

6. Callback functions.

$('.el').kAnimation({
  onComplete: null,
  onChange: null,
  onClick: null,
  onBegin: null,
  onHover: null
});

7. You are able to pass the options to the CSS animation via k-* attribute like this:

<p k-animation="animated fadeInUp" 
   k-class="fadeIn, fadeOutUp" 
   k-delay="1000" 
   k-forever="true" 
   k-delayforever="3000" 
   k-type="Auto">
   Auto Animation 
</p>

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