Kenburns.js is a jQuery plugin that applies a fully configurable Ken Burns effect to your image using the Canvas API.

best jquery plugin for animation, jquery loader plugin, jquery slide animation plugin, rain jquery, best jquery gallery plugin, jquery plugins examples

How to make use of it:

1. Wrap your image in a DIV container.

<div id="img" class="kenburns">
  <img src="image.jpg" alt="">
</div>

2. Hide the image when the page is loaded to avoid flickering.

.kenburns img {
  display: none;
}

3. Make the Ken Burns effect fully responsive.

.kenburns {
  width: 100%;
  position: relative;
  margin: auto;
}

.kenburns canvas { 
  width: 100%;
  height: auto;
}

4. Include the jquery.kenburns.min.js main script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.kenburns.min.js"></script>

5. Apply Ken Burns’s effect to the photo.

$('img', '#img').kenburns({
  // options here
});

6. Options available to customize the Ken Burns effect.

$('img', '#img').kenburns({

  // duration of animation
  'duration': 7000,

  // width/height of the canvas
  'width':  940,
  'height': 360,

  // 'random', 'center', 'left'
  // 'top', 'right', 'bottom'
  'align': 'random',

  // zoom level
  'zoom': 1.1,

  // enable/disable debug mode
  'debug': false,
  
});

7. API methods.

// reset
$('img', '#img').kenburns('reset');

// start
$('img', '#img').kenburns('start');

// pause
$('img', '#img').kenburns('pause');

// stop
$('img', '#img').kenburns('stop');

Ken Burns Effect With jQuery And Canvas, jquery.kenburns Plugin/Github, jquery easy plugin, jquery simple gallery

See Demo And Download

Official Website(JBlond): Click Here

This superior jQuery/javascript plugin is developed by JBlond. For extra advanced usage, please go to the official website.