Add Diwali Fireworks Using Jquery In Your Website

Hi Friends, Today i will tell you about how to add diwali fireworks using jquery in your website. It is very useful when you launching your website or you want to celebrate some festival in your website. If you add jquery diwali fire crackers in your website then your user thought you are celebrating some festival.

If you want to know more about jquery, You can Learn JQUERY Code Step By Step For Beginners.

First See the Live Demo and Download the code too.

How To Add Diwali Fireworks Using Jquery In Your Website:

You have to follow some steps to add diwali fireworks using jquery in your website. These steps are

Step1: You have to add some lines of code in your page to create a fireworks.




Step2: Add the below diwali fireworks styling code in your page.

body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
h1 { color:#fff; text-align:center; font-size:120px; font-family:arial; top:100px; left:180px; position:absolute;}

Step3: Now you have to add below  jquery code in your head or body section of your website.

<script src="http://code.jquery.com/jquery-1.6.4.js"></script>

Step4: You have to add below javascript code.

<script type="text/javascript">

var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
mousePos = {
x: 400,
y: 300
},

// create canvas
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
particles = [],
rockets = [],
MAX_PARTICLES = 400,
colorCode = 0;

// init
$(document).ready(function() {
document.body.appendChild(canvas);
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
setInterval(launch, 800);
setInterval(loop, 1000 / 50);
});

// update mouse position
$(document).mousemove(function(e) {
e.preventDefault();
mousePos = {
x: e.clientX,
y: e.clientY
};
});

// launch more rockets!!!
$(document).mousedown(function(e) {
for (var i = 0; i < 5; i++) {
launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
}
});

function launch() {
launchFrom(mousePos.x);
}

function launchFrom(x) {
if (rockets.length < 10) {
var rocket = new Rocket(x);
rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
rocket.vel.y = Math.random() * -3 - 4;
rocket.vel.x = Math.random() * 6 - 3;
rocket.size = 8;
rocket.shrink = 0.999;
rocket.gravity = 0.01;
rockets.push(rocket);
}
}

function loop() {
// update screen size
if (SCREEN_WIDTH != window.innerWidth) {
canvas.width = SCREEN_WIDTH = window.outerWidth;
}
if (SCREEN_HEIGHT != window.outerHeight) {
canvas.height = SCREEN_HEIGHT = window.outerHeight;
}

// clear canvas
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

var existingRockets = [];

for (var i = 0; i < rockets.length; i++) {
// update and render
rockets[i].update();
rockets[i].render(context);

// calculate distance with Pythagoras
var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));

// random chance of 1% if rockets is above the middle
var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;

/* Explosion rules
- 80% of screen
- going down
- close to the mouse
- 1% chance of random explosion
*/
if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
rockets[i].explode();
} else {
existingRockets.push(rockets[i]);
}
}

rockets = existingRockets;

var existingParticles = [];

for (var i = 0; i < particles.length; i++) {
particles[i].update();

// render and save particles that can be rendered
if (particles[i].exists()) {
particles[i].render(context);
existingParticles.push(particles[i]);
}
}

// update array with existing particles - old particles should be garbage collected
particles = existingParticles;

while (particles.length > MAX_PARTICLES) {
particles.shift();
}
}

function Particle(pos) {
this.pos = {
x: pos ? pos.x : 0,
y: pos ? pos.y : 0
};
this.vel = {
x: 0,
y: 0
};
this.shrink = .97;
this.size = 2;

this.resistance = 1;
this.gravity = 0;

this.flick = false;

this.alpha = 1;
this.fade = 0;
this.color = 0;
}

Particle.prototype.update = function() {
// apply resistance
this.vel.x *= this.resistance;
this.vel.y *= this.resistance;

// gravity down
this.vel.y += this.gravity;

// update position based on speed
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;

// shrink
this.size *= this.shrink;

// fade out
this.alpha -= this.fade;
};

Particle.prototype.render = function(c) {
if (!this.exists()) {
return;
}

c.save();

c.globalCompositeOperation = 'lighter';

var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;

var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");

c.fillStyle = gradient;

c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();

c.restore();
};

Particle.prototype.exists = function() {
return this.alpha >= 0.1 && this.size >= 1;
};

function Rocket(x) {
Particle.apply(this, [{
x: x,
y: SCREEN_HEIGHT}]);

this.explosionColor = 0;
}

Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;

Rocket.prototype.explode = function() {
var count = Math.random() * 10 + 80;

for (var i = 0; i < count; i++) {
var particle = new Particle(this.pos);
var angle = Math.random() * Math.PI * 2;

// emulate 3D effect by using cosine and put more particles in the middle
var speed = Math.cos(Math.random() * Math.PI / 2) * 15;

particle.vel.x = Math.cos(angle) * speed;
particle.vel.y = Math.sin(angle) * speed;

particle.size = 10;

particle.gravity = 0.2;
particle.resistance = 0.92;
particle.shrink = Math.random() * 0.05 + 0.93;

particle.flick = true;
particle.color = this.explosionColor;

particles.push(particle);
}
};

Rocket.prototype.render = function(c) {
if (!this.exists()) {
return;
}

c.save();

c.globalCompositeOperation = 'lighter';

var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;

var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");

c.fillStyle = gradient;

c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();

c.restore();
};
</script>

Step5: Now you can check your web page. You can see the fireworks in your web page.

Note: If you click anywhere you can see the crackers are going to that clicking position.

If you face any kind of problem for adding the script you can download the code and see the live demo.

Now Add Diwali Fireworks Using Jquery In Your Website Anywhere.

Read About Other Interesting Things below.

1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
4. Basics of Social Media Optimization Services
5. On Page Search Optimization Services
6. How to Create a Website from scratch for beginners
7. How To Write a Blog for Website and Content Marketing
8. Website Promotion – Need For All Websites
9. Important Things to Think Before Graphic Designs
10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

Categories: Website Design