UNIRRY

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

雪がゆらゆら降ってくるjsサンプルのループ版をつくる

snowdrop2

雪がふってくるやつをもう少しよくできたので記事にします。前回のは300個落ちてきたらおしまいだったので、ずっとおちてくるように変更しました。ついでに少しでもコードに気を使ってみました。

雪がふってくるスクリプトをつくる:ループ版

つくるのは、①降らしたい量の雪divを作って、配列に格納します。②配列に格納した雪divに順々、ゆらゆら揺れながら落ちていくアニメーションをつけていきます。③落ちるエリアの最後まで到達したら、落ちた分マイナスで位置を戻して、x位置もランダム数字でバラバラに変更します。④それの繰り返し。以上!

css

cssは前回とまったく同じです。

#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

前より断然見やすくなったはずだぜ。

$(function () {

var droplist  = [],
    dropnumb  = 50,
    droparea  = $('#droparea').height();

for ( var i = 1; i <= dropnumb; i++ ) {
  if ( i % 3 === 0 ) {
    $('#droparea ul').append('<li class="itemout' + i + '"><div id="item' + i + '"><div class="yukil"></div></div></li>');
  } else {
    $('#droparea ul').append('<li class="itemout' + i + '"><div id="item' + i + '"><div class="yukis"></div></div></li>');
  }
  var popitem = '#item' + i;
  var popout  = '.itemout' + i;
  $(popout).css({
    'left': Math.floor(Math.random()*winwt) + 'px',
    'position':'relative',
    'top':'-20px'
  });
  $(popitem).css({
    'position':'absolute',
    'top':'0',
    'left':'0'
  });
  droplist.push($(popitem));
}

dropSnow();

function dropSnow() {
    autoDrop = setInterval(function(){
      if ( droplist.length > 0 ) {
        var dropi   = droplist.shift();
        var dropnum = dropi.attr('id');
            dropnum = dropnum.replace('item','');
        dropiDown(dropi,dropnum,dropnum);
        console.log(droplist.length);
      } else {
        console.log(droplist.length);
        clearInterval(autoDrop);
      }
    }, 500);

}

function dropiDown(dropi,dropnum,num) {
  setInterval(function(){
    var dropposi = dropi.position();
    if (dropposi.top < droparea) {
      dropi.css({
        'top'      : dropposi.top + 1 + 'px',
        'left'     : Math.floor(Math.sin(num/20)*15) + 'px'
      });
    } else {
      dropi.css({
        'top'      : dropposi.top - droparea + 'px',
        'left'     : Math.floor(Math.random()*winwt) + 'px'
      });
    }
    num++;
  }, 20);
}

});

雪が降ってくるjsのサンプルはこちら

サンプル

scsho


horoscope

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