1

ホリデー シーズンのグリーティング カードを作成していて、雪の結晶を降らせたいと思っています。これを達成するためにプラグインを使用したくありません。画面に雪の結晶をランダムに配置するコードを生成しました。一度に最大 20 個のフレークを画面にランダムに配置する for ループを試みています。スノーフレークの 20 個のインスタンスを同じ位置に配置しているようです。ランダムにしたいです。

// 降雪関数 fallingSnow() {

    var snowflake = $('<div class="snowflakes"></div>');
    $('#snowZone').prepend(snowflake);
    snowX = Math.floor(Math.random() * $('#site').width());
    snowSpd = Math.floor(Math.random() + 5000);

    snowflake.css({'left':snowX+'px'});
    snowflake.animate({
        top: "500px",
        opacity : "0",

    }, snowSpd, "easeInCirc", function(){
        $(this).remove();
        fallingSnow();
    });

}
var timer = Math.floor(Math.random() +1000);

window.setInterval(function(){
    fallingSnow();
}, timer);

jsfiddle

4

1 に答える 1

3

クラスを持つすべての要素ではなく、要素を変更します。

function fallingSnow() {
  var snowflake = $('<div class="snowflakes"></div>');
  $('#site').prepend(snowflake);
  snowX = Math.floor(Math.random() * $('#site').width());
  snowSpd = Math.floor(Math.random() * (500) * 20) + 1000;

  snowflake.css({
    'left': snowX + 'px'
  });
  snowflake.animate({
    top: "200px", // height of area
    opacity: "0",

  }, snowSpd, function() {
    $(this).remove();
    fallingSnow();
  });
}
for (var i = 0; i < 100; i++) {
  fallingSnow();
}
.snowflakes {
  width: 10px;
  height: 10px;
  background: black;
  position: absolute;
  top: -40px;
}
#site {
  width: 400px;
  height: 200px;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="site"></div>

于 2012-12-03T21:48:59.770 に答える