紙吹雪を降らせるjQueryプラグイン #JavaScript

生徒の作品に使えそうかなぁと思ったのと、
紙吹雪ってキャンバス意外で綺麗に見えてるのがあまりなかったので作ってみました！

ただやっぱりcanvasじゃないので、たくさんのタグを生成すると重くなっちゃいますね。

site: http://develo.org/2014/06/28/1557.html
GitHub: https://github.com/kamem/jquery.confetti

仕様

指定の数だけ紙吹雪をふらせる
htmlとcssアニメーションで紙吹雪を再現
domなので少し重いため数は制限する必要がある
bodyの一番したにタグを生成
画面外から消えた時にタグを削除
全てのタグが画面外に消えた場合にcomplateを実行

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.confetti.js"></script>
<script type="text/javascript">
$(function(){
    $('html').confetti();
});
</script>

オプション

初期設定

x: $content.offset().left + $content.width() / 2,
y: $content.offset().top + $content.height() / 2,
num: 20,
speedRange: 10,
airResistanceNum:  0.95,
gravityNum: 0.45,
intervalSpeed: 30,
complate: false

※ [x,y] defaultでは指定したタグの位置+タグの半分の位置

x: {Number} offset().left + width() / 2
y: {Number} offset().top + height() / 2
num: {Number} 紙吹雪の数
speedRange: {Number} 初速度の範囲
airResistanceNum: {Number} 空気抵抗
gravityNum: {Number} 重力
intervalSpeed: {Number} 処理をどのぐらいの感覚で行うか
complate: {Function} 全てのタグが画面外に消えた場合実行される関数

例

htmlのどこかをクリックした際にクリック位置から紙吹雪をちらす

$(function(){
    $('html').click(function(e){
        $('[class*=confetti]').remove();
        $('html').confetti({
            x: e.pageX,
            y: e.pageY,
            complate:function(){
                alert('complate');
            }
        });
    });
});