CODEWITHSUNDEEP
jquerycssanimation
colemande
colemande

Reputation: 392

jquery particle generator

I have made a particle generator with Jquery it works fine but it is kinda a CPU hog. Any suggestions are appreciated.

function particles() {

$.each($('.particles'), function () {
    if ($(this).css("opacity") == 0) {
        $(this).remove();
    }
});

var particleSize = Math.floor(Math.random() * 4 + 1);

var speed = Math.floor(Math.random() * 5000 + 3000);
var distance = Math.floor(Math.random() * 500 + 200);
var fallOffSpeed = speed / 2;
var fallOff = distance + distance / 2;

$('body').prepend($($('<div>', {
    "class" : "particles",
    "height": particleSize,
    "width": particleSize
}).css({
    "background-color": "red",
    "position": "absolute",
    "top": Math.floor(Math.random() * 39),
    "z-index": "-1"
}).animate({
    "left": distance
}, speed, 'linear').animate({
    "left": fallOff,
    "opacity" : "0"
}, fallOffSpeed, 'linear')));

setTimeout(particles, 1000);

}

Upvotes: 2

Views: 3834

Answers (2)

Pierre de LESPINAY
Pierre de LESPINAY

Reputation: 46178

I just created a very small jQuery plugin for generating particles from an element (demo)

My plugin also takes advantage of CSS3 for the animation thanks to jquery.animate-enhanced

(You should be able to use canvas in IE with this kind of thing)

Upvotes: 3

Hamish
Hamish

Reputation: 23316

Use vanilla JavaScript in a canvas element and it will fly.

eg: http://www.ferretarmy.com/files/canvas/canvasParticle/canvasParticle2.html

Upvotes: 2

Related Questions