clover.blue

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

Data
2014/06/28
Tag

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

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

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

仕様

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

DEMO

使い方

<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');
            }
        });
    });
});