UNIRRY

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

雪がゆらゆら降ってくるサンプルをjQueryでつくってみる

dropsnow1

雪がふってくるのができたので記事にします。でもここで、私のソースヤバいらしいよ^^ってことが最近わかってきました〜。私のソースやばいやり方してるらしいところが多々あるらしいよ^^気をつけて!

雪がふってくるスクリプトをつくる

つくるのは、①ふらしたい分、雪のdivを作って、配列に格納します。②配列に格納した雪divに順々、ゆらゆら揺れながら落ちていくアニメーションをつけていきます。以上!

css

雪の大きさをせめて2種類くらいにしたかったので、クラスを二つ用意しました。

#droparea {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#droparea .yukil {
width: 8px;
height: 8px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: #ffffff;
opacity: 0.7;
}
#droparea .yukis {
width: 6px;
height: 6px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: #ffffff;
opacity: 0.6;
}

js

雪divを生成したら、dropareaに対してpositionのabsoluteでleftをランダムに指定します。雪divは、一秒毎に縦方向に1px分、横方向の動きは三角関数を使ってゆらゆらなるように設定しています。

$(function () {

//雪用の配列と降らしたい数を定義
var droplist = [],
    dropnum  = 300;

//for文で雪divを降らしたい分生成
for ( var i=1; i <= dropnum; i++ ) {
  if ( i % 3 === 0 ) {
    $("#droparea").append("<div class='itemout" + i + "'><div id='item" + i + "'><div class='yukil'></div></div></div>");
  } else {
    $("#droparea").append("<div class='itemout" + i + "'><div id='item" + i + "'><div class='yukis'></div></div></div>");
  }
  var popitem = "#item" + i;
  var popout  = ".itemout" + i;
  $(popout).css({"left":Math.random() * winwt + "px", "position":"relative", "top":"-20px"});
  $(popitem).css({"position":"absolute", "top":"0", "left":"0"});
  droplist.push($(popitem));
}

//配列に格納してひとつづつアニメーション処理を入れる
for ( var k=0; k < droplist.length; k++ ){
    dropItem(droplist[k], k);
}

//雪が縦にゆらゆらしながら落ちてくるアニメーション関数
function dropItem(item, i){
  setTimeout(function(){
    setInterval(function(){
      var position = item.position();
      if ( position.top < 350 ) {
        item.css({
          "top"  : position.top  + 1 + "px",
          "left" : Math.floor(Math.sin(i/20)*15) + "px"
        });
        i++;
      } else {
        item.css({
          "top"  : position.top  + 1 + "px",
          "left" : Math.floor(Math.sin(i/20)*15) + "px"
        });
        i++;
        item.animate({'opacity':'0'}, 500, function(){
          item.remove();
        });
      } 
    }, 20);      
  }, 500 * i);
}

});

雪がふってくるサンプル

サンプル


horoscope

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