JSFiddle - React, Tailwind, and code Playground

by davidmold

HTML

<div id="snowflakes">
</div>

CSS

.snow {
    top:-50px;
    left:0px;
    position:absolute;
    z-index:200;
color:#fff;
    
}
body {background-color:grey;}
#site {
    width:500px;
    height:500px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

JavaScript

snowCount = 0;
function snowFlakes(){
    console.log(snowCount);
    if(snowCount > 20){
        
        return false
    }else{
    var randomTime = Math.floor(Math.random() * (500) * 2);
    setTimeout(function(){
        snowCount = snowCount +1;
        jquerysnow();
       snowFlakes();
    },randomTime);
    }
}
function jquerysnow() {

    
       var snow = $('<div class="snow"></div>');
        $('#snowflakes').prepend(snow);
        snowX = Math.floor(Math.random() * $('#snowflakes').width());
        snowSpd = Math.floor(Math.random() * (500) * 20);

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

        }, 2000, function(){
            $(this).remove();
            jquerysnow();
        });



}

snowFlakes()