K-Animation jQuery Plugin Demos

Via Auto

Auto Animation

JS

$(document).ready(function() {
  $('.auto').kAnimation({
    ClassName: 'animated fadeInUp',
    Animation: [
      'fadeIn',
      'fadeOutUp',
    ],
    Delay: 1000,
    Forever: true,
    DelayForever: 3000
  });
});

Via Click

Click to Animation

JS

$(document).ready(function() {
  $('.click').kAnimation({
    ClassName: 'animated',
    Animation: 'fadeInUp',
    Type: 'Click',
    Forever: true,
    DelayForever: 100
  });
});

Via Hover

Hover to Animation

JS

$(document).ready(function() {
  $('.hover').kAnimation({
    ClassName: 'animated',
    Animation: 'fadeInUp',
    Type: 'Hover',
    Forever: true,
    DelayForever: 100
  });
});

Via Scroll

Scroll to Animation

JS

$(document).ready(function() {
  $(".scroll").kAnimation({
    ClassName: 'animated',
    Animation: 'fadeInUp',
    Delay: 2000,
    ScrollLoop: true,
    Type: 'Scroll'
  });
});

HTML Attrs

Via Auto

Auto Animation

HTML

(k-Animation='animated fadeInUp', k-Class="fadeIn, fadeOutUp", k-Delay="1000", k-Forever="true", k-DelayForever="3000", k-Type="Auto")

JS

$('[k-Animation]').kAnimation();

Events

Via Events

Auto Animation

JS

$(document).ready(function() {
  $('.events').kAnimation({
    ClassName: 'animated fadeInUp',
    Animation: [
      'fadeIn',
      'fadeOutUp',
    ],
    Delay: 1000,
    Forever: true,
    DelayForever: 3000,
    onComplete: function(){
      $(this).html('Text changed');
    },
    onClick: function(){
      alert('Clicked');
    },
    onChange: function(){
      console.log('onChange');
    },
    onBegin: function(){
      console.log('onBegin');
    },
    onHover: function(){
      alert('onHover');
    },
    unHover: function(){
      alert('unHover');
    }
  });
});