logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Add Diwali Fireworks Using Jquery In Your Website

Add Diwali Fireworks Using Jquery In Your Website

April 26, 2016 No comments Article SEO Website Designing

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.

SEO Website Designing Live Demo    SEO Website Designing Download

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.

SEO Website Designing Live Demo    SEO Website Designing Download

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.

 

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: Add Diwali Fire crackers Using Jquery In Your Website, Add Diwali Fireworks Using Javascript, Add Diwali Fireworks Using Jquery In Your Website, Fireworks Using Jquery In Your Website

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.