Awesome Open Source
Awesome Open Source

boomJS

一个有趣的动画效果,用 JavaScript 配合 CSS3 实现让图片爆炸的动画。

Demo演示戳我

Example

Boom效果演示图

Boom效果演示图

Usage

<!-- style -->
<link rel="stylesheet" type="text/css" href="Boom.css" />
<!-- scripts -->
<script src="jquery.js"></script>
<!-- scripts -->
<script src="boom.js"></script>

<script>
// 调用方法:
//法一:传入图片的 jQuery 对象
boom($('img')) 

// 法二:构建 boom 实例,传入图片的 jQuery 对象
var bom = boom();
bom.boom($('img'));
</script>

API

boom($('img'),{
  // 缩放值
 'scaleLevel' : 3,
  // 模糊值
 'blurLevel': 9,
  // 弹射距离 
 'boomLevel': 4,
  // 爆炸时长
 'boomTime':800,
  // 是否打开日志
 'isOpenLog':true
});

温馨提示,不建议将 scaleLevel 的值设太高 :) 。


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,779
css3 (200
animate (22

Find Open Source By Browsing 7,000 Topics Across 59 Categories