JSで雪をアニメーションする最も良い方法は？

Question

私はJavaScriptを使用してクリスマスカードを作成することになっています。他の雪片とは異なるx値を使って雪片を作成するのが難しいです。

今、私は雪片がどのように落ちているかを見ていますが、私は雪の残りの部分を生成する助けが必要です。ここで

は、それが落ちたときに、それがどのように見えるかです：

sy++; 
    if(sy <= 400) { 
     snowy = sy; 
    } else { 
     sy = 0; 
    } 

    sx++; 
    if(sx < 400) { 
     snowx1 = sx; 
     snowx2 = sx + 1; 
    } else { 
     sx = 0; 
    } 

    ellipse(random(snowx1, snowx2), snowy, 10, 10); 

は、どのように私は、特定のアニメーションがランダム（）の部分を変更することなく、異なるx値で生成されたことを得るのですか？

Answer 1

ハッピーニューイヤー;）

var snow_intensity = 50; // smaller number = more snowflakes; 
 

 
function Snowflake(){ 
 
    var snowflake = this; 
 
    snowflake.x = (Math.random() * $(document).width()); 
 
    snowflake.size = (Math.random() * 35) + 10; 
 
    snowflake.opacity = Math.random(); 
 
    snowflake.body = $("<em class='snowflake'>*</em>"); 
 
    snowflake.body.css({'font-size': this.size + 'px', 'left': this.x +'px', opacity: this.opacity }); 
 
    snowflake.fall = function(){ 
 
    var that = this; 
 
    var $snowflake = this.body; 
 
    var swing_direction = 1; 
 
    var swing_wave = Math.random() * 100; 
 
    var interval = setInterval(function(){ 
 
     $snowflake.css({left: that.x + (swing_direction * swing_wave)}); 
 
     swing_direction = - swing_direction; 
 
    }, 1000); 
 
    var speed = (Math.random() * 3000) + 3000; 
 
    $snowflake.animate({top: '100vh'}, speed, function(){ 
 
     clearInterval(interval); 
 
     $snowflake.remove(); 
 
    });  
 
    } 
 
    $('body').append(snowflake.body); 
 
    snowflake.fall(); 
 
} 
 

 
var snow = window.setInterval(function() { 
 
    new Snowflake(); 
 
}, snow_intensity); 
 

 
document.onkeypress = function() { 
 
    window.clearInterval(snow); 
 
};

body {background: CornflowerBlue;overflow:hidden;} 
 
h1 { 
 
    color:LightSkyBlue; 
 
    text-align:center; 
 
    opacity:.2; 
 
} 
 
.snowflake{ 
 
    position:absolute; 
 
    top:-40px; 
 
    transition: left 5s; 
 
    opacity:1; 
 
    color: #fff; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
} 
 

 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1>HAPPY NEW YEAR</h1>