It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 21 August 2012
In this code you will see very beautiful fireworks, each of which has a different color. You can use this code when the user of your site wins an award and you want to congratulate him/her or it can be used for the background of your website in general and make your website more attractive.
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
body {
background: black;
overflow: hidden;
margin: 0;
}
canvas {
background: #000;
}
</style>
<div>
<canvas id="canvas"></canvas>
</div>
<script>
window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", onLoad, false);
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
var canvas, ctx, w, h, particles = [], probability = 0.04,
xPoint, yPoint;
function onLoad() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
resizeCanvas();
window.requestAnimationFrame(updateWorld);
}
function resizeCanvas() {
if (!!canvas) {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
}
function updateWorld() {
update();
paint();
window.requestAnimationFrame(updateWorld);
}
function update() {
if (particles.length < 500 && Math.random() < probability) {
createFirework();
}
var alive = [];
for (var i = 0; i < particles.length; i++) {
if (particles[i].move()) {
alive.push(particles[i]);
}
}
particles = alive;
}
function paint() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
for (var i = 0; i < particles.length; i++) {
particles[i].draw(ctx);
}
}
function createFirework() {
xPoint = Math.random() * (w - 200) + 100;
yPoint = Math.random() * (h - 200) + 100;
var nFire = Math.random() * 50 + 100;
var c = "rgb(" + (~~(Math.random() * 200 + 55)) + ","
+ (~~(Math.random() * 200 + 55)) + "," + (~~(Math.random() * 200 + 55)) + ")";
for (var i = 0; i < nFire; i++) {
var particle = new Particle();
particle.color = c;
var vy = Math.sqrt(25 - particle.vx * particle.vx);
if (Math.abs(particle.vy) > vy) {
particle.vy = particle.vy > 0 ? vy : -vy;
}
particles.push(particle);
}
}
function Particle() {
this.w = this.h = Math.random() * 4 + 1;
this.x = xPoint - this.w / 2;
this.y = yPoint - this.h / 2;
this.vx = (Math.random() - 0.5) * 10;
this.vy = (Math.random() - 0.5) * 10;
this.alpha = Math.random() * .5 + .5;
this.color;
}
Particle.prototype = {
gravity: 0.05,
move: function () {
this.x += this.vx;
this.vy += this.gravity;
this.y += this.vy;
this.alpha -= 0.01;
if (this.x <= -this.w || this.x >= screen.width ||
this.y >= screen.height ||
this.alpha <= 0) {
return false;
}
return true;
},
draw: function (c) {
c.save();
c.beginPath();
c.translate(this.x + this.w / 2, this.y + this.h / 2);
c.arc(0, 0, this.w, 0, Math.PI * 2);
c.fillStyle = this.color;
c.globalAlpha = this.alpha;
c.closePath();
c.fill();
c.restore();
}
}
</script><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!