UNIRRY

WEBデザインとホロスコープと宇宙のブログ

おめでとうパンパカパーン!紙吹雪なjsアニメーションを私もやってみた

dropitem1

おめでとう「パンパカパーン」紙吹雪的なやつをつくってみました。完全にプハァーをやりたくてやっただけです。

とりいそぎhtml

<div id="drop">

<div class="boxl">
<img src="item1l.png" id="item1l">
<img src="item2l.png" id="item2l">
<img src="item3l.png" id="item3l">
</div>

<div class="boxr">
<img src="item1r.png" id="item1r">
<img src="item2r.png" id="item2r">
<img src="item3r.png" id="item3r">
</div>

<img src="obake.png" id="obaq">

</div>

紙吹雪が散ってるようにみえる・・・?

長いからもっと良いやり方ありそうですよね・・・!動きだけ再現できたけど。
右斜め下に行きつつ消えて、左斜め下に行きつつ消えて、右斜め下に行きつつ消えてってのをかぶせて実行してるだけです。

// 変数定義
var item1l = $("#item1l"),
    item2l = $("#item2l"),
    item3l = $("#item3l"),
    item1r = $("#item1r"),
    item2r = $("#item2r"),
    item3r = $("#item3r"),
    obaq = $("#obaq"),
    autoDrop, jumpObaq;

// ぴろぴろする連続設定
function autoDropDo() {
  autoDrop = setInterval(dropItem, 2000);
  jumpObaa = setInterval(jumpObaq, 5000);
}

// ウィンドウフォーカス関連
$(window).focus();
autoDropDo();
$(window).bind("focus",function(){
    clearInterval(autoDrop);
    clearInterval(jumpObaa);
    autoDropDo();
}).bind("blur",function(){
    clearInterval(autoDrop);
    clearInterval(jumpObaa);
});

// ぴろぴろする1ターン分の関数
function dropItem(){

  item1l.animate({"top":"20px", "left":"20px", "opacity": "0.7"}, 1000);
  setTimeout(function(){
    item1l.animate({"top":"40px", "left":"0", "opacity":"0"}, 1000, function(){
                item1l.css({"top":"0", "left":"0", "opacity":"0"});
    });
  }, 1000);
  
  setTimeout(function(){
    item2l.animate({"top":"30px", "left":"20px", "opacity": "0.7"}, 1000);
  }, 1000);
  setTimeout(function(){
    item2l.animate({"top":"50px", "left":"0", "opacity":"0"}, 1000, function(){
                item2l.css({"top":"0", "left":"0", "opacity":"0"});
    });
  }, 2000);
  
  setTimeout(function(){
    item3l.animate({"top":"40px", "left":"-15px", "opacity": "0.7"}, 1000);
  }, 500);
  setTimeout(function(){
    item3l.animate({"top":"65px", "left":"0", "opacity":"0"}, 1000, function(){
                item3l.css({"top":"0", "left":"0", "opacity":"0"});
    });
  }, 1500);
  
  
  item1r.animate({"top":"20px", "right":"20px", "opacity": "0.7"}, 1000);
  setTimeout(function(){
    item1r.animate({"top":"40px", "right":"0", "opacity":"0"}, 1000, function(){
                item1r.css({"top":"0", "right":"0", "opacity":"0"});
    });
  }, 1000);
  
  setTimeout(function(){
    item2r.animate({"top":"30px", "right":"20px", "opacity": "0.7"}, 1000);
  }, 1000);
  setTimeout(function(){
    item2r.animate({"top":"60px", "right":"0", "opacity":"0"}, 1000, function(){
                item2r.css({"top":"0", "right":"0", "opacity":"0"});
    });
  }, 2000);
  
  setTimeout(function(){
    item3r.animate({"top":"35px", "right":"-15px", "opacity": "0.7"}, 1000);
  }, 500);
  setTimeout(function(){
    item3r.animate({"top":"60px", "right":"0", "opacity":"0"}, 1000, function(){
                item3r.css({"top":"0", "right":"0", "opacity":"0"});
    });
  }, 1500);
  
}

// オバQ
function jumpObaq(){
    obaq.animate({"top":"213px"}, 400, "easeInOutQuart", function(){
        obaq.animate({"top":"228px"}, 300, "easeInOutQuart");
    });
}

おめでとう「パンパカパーン」紙吹雪的のサンプル

サンプル


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3