Лучший способ оживить снег в 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); 

Как получить конкретную анимацию генерироваться при различных х-значения без изменения случайной() часть?

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>