CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

Create Snow Flakes in Jquery

I created snow flakes in jquery.Creating and removing a div may cause the script to unresponsive. Right now i tried jquery with animate() I want to generate the flakes with 20 at a same time of page load. I am not sure when i tried this method may cause this unresponsive mean (Browser has get too slow)

Here is the New jquery Code

function jquerysnow() {

    snowCount = 20;
       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();
        });



}
jquerysnow();

See this here a fiddle

Now it showing one flake at a time once the flakes disappear itself it generate next. How can i generate multiple flakes without unresponsive script.

Upvotes: 2

Views: 4603

Answers (2)

john Smith
john Smith

Reputation: 17926

check this out, pretty simple i just added a function that triggers jquerysnow() and then calls itself again wit random time

updated code now it will just create 20 snow flakes

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()

http://jsfiddle.net/v7LWx/390/

Upvotes: 3

geomagas
geomagas

Reputation: 3280

I just finished writing an article on the subject and I thought I'd share.

It's not very jQuery-heavy though, mostly pure good old javascript. But it produces a pretty decent snow-falling effect.

So, for anyone interested, here it goes!

Upvotes: 1

Related Questions