Ken Burns Effect With jQuery And Canvas - Kenburns.js

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

Ken Burns Effect is a combination of Panning and Zooming effect that is often used in film and video production from still imagery. 

How to use it:

1. Wrap your image into a DIV container.

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

2. Hide the image on page load to aviod flashing.

.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 main script jquery.kenburns.min.js after jQuery.

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

5. Apply the Ken Burns Effect to the image.

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

6. Available options 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');

Changelog:

v1.0.2 (2023-04-14)

• Fixed

---

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