Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Super Dazzling web fireworks effects </title>
<style type= "Text/css" >
. fire{display:block; overflow:hidden; font-size:12px; Position:absolute};
Body{overflow:hidden; background: #000}
Html{overflow:hidden; background: #000}
</style>
<body>
</body>
<script type= "Text/javascript" >
var fire = function (r, color) {
This.radius = R | | 12;
This.color = color;
This.xpos = 0;
This.ypos = 0;
This.zpos = 0;
THIS.VX = 0;
This.vy = 0;
This.vz = 0;
This.mass = 1;
this.x = 0;
this.y=0;
THIS.P = document.createelement ("span");
This.p.classname = "Fire";
this.p.innerhtml = "*";
This.p.style.fontsize = This.radius + "px";
This.p.style.color = "#" + This.color;
}
Fire.prototype = {
Append:function (parent) {
Parent.appendchild (THIS.P);
},
Setsize:function (scale) {
This.p.style.fontsize = This.radius * scale + "px";
},
Setposition:function (x, y) {
This.p.style.left = x + "px";
This.p.style.top = y + "px";
},
Setvisible:function (b) {
This.p.style.display = b? "Block": "None";
}
}
var fireworks = function () {
var fires = new Array ();
var count = 150;
var fl = 250;
var vpx = 500;
var vpy = 300;
var gravity =. 5;
var floor = 200;
var bounce =-.8;
var timer;
var wind = ((Math.floor (Math.random () + 3)/10) * (Math.random () *2-1 > 0 1:-1) *.25;
var wpos = 0;
var Wcount;
return {
Init:function () {
Wcount = + Math.floor (math.random () * 100);
for (var i=0; i<count; i++) {
var color = 0xFF0000;
color = (Math.random () * 0xFFFFFF). ToString (+). ToString (). Split (".") [0];
while (Color.length < 6) {
color = "0" + color;
}
var fire = new Fire (color);
Fires.push (fire);
Fire.ypos =-100;
Fire.vz = Math.random () * 6-3;
FIRE.VX = (Math.random () *2-1) * *;
Fire.vy = Math.random () *-15-15;
fire.x = 500
FIRE.Y = 600;
Fire.append (document.body);
}
var = this;
Timer = setinterval (function () {
wpos++;
if (Wpos >= wcount) {
Wpos = 0;
Wcount = + Math.floor (math.random () * 100);
Wind = ((Math.floor (Math.random () + 3)/10) * (Math.random () *2-1 > 0 1:-1) *.25;
}
for (var i=0;i<count; i++) {
That.move (Fires[i]);
}
}, 30);
},
Move:function (Fire) {
Fire.vy + = gravity;
Fire.x + = FIRE.VX;
Fire.y + = Fire.vy;
FIRE.VX + = wind;
Fire.setposition (fire.x, fire.y);
if (fire.x < 0 | | fire.x >1000 | | fire.y < 0 | | fire.y > 600) {
FIRE.VX = (Math.random () *2-1) * *;
Fire.vy = Math.random () *-15-15;
fire.x = 500;
FIRE.Y = 600;
Fire.setposition (fire.x, fire.y);
}
}
}
}
Fireworks (). Init ();
</script>
JS Animated Fireworks Firework
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
