Kenburns.js是一个jQuery插件，它使用Canvas API将完全可配置的Ken Burns效果应用于图像。

Ken Burns效果是Panning和Zooming效果的组合，通常用于静态图像的电影和视频制作

如何使用它:

1.将您的图像包装到DIV容器中。

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

2.在页面加载时隐藏图像以避免闪烁。

.kenburns img {
  display: none;
}

3.使Ken Burns效应完全响应。

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

4.包括主要脚本jquery.kenburns.min.js查询在jQuery之后。

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

5.将Ken Burns效果应用于图像。

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

6.可用于自定义Ken Burns效果的选项。

$('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方法。

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

更新日志：

v1.0.2 (2023-04-14)

• 固定的

预览截图

Ken Burns效果 jQuery和Canvas Kenburns.js