Create fireworks with javascript using fireworks.js

by  
Share:
Create fireworks with javascript using fireworks-dot-js

We all are fascinated by fireworks, the light and sound effect always amaze us. So this Diwali I see no reason to have some fireworks on my blog too. I came across this JavaScript library called fireworks.js. It has got some really cool firework show. I am sure you guys will love this too. In this tutorial I will explain how to create the fireworks effect with JavaScript using fireworks.js

View Demo

What will this fireworks.js do?

It’s a JavaScript code that will create star-burst type explosion in a web document. It’s also supports sound effect (for modern browser that support flash). All in all it’s a firework effect someone could easily use on their site.

Follow this steps to create the fireworks using fireworks.js

Attach these JavaScript and style sheet files.

<link rel="stylesheet" type="text/css" href="css/fireworks.css" media="screen" />
<script type="text/javascript" src="js/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="js/fireworks.js"></script>

Now just add the firework container inside the body tag. Let it as it is (It will be hidden). Make sure the image path is correct and images are present in the server/folder.
<div id="fireworks-template">
    <div id="fw" class="firework"></div>
    <div id="fp" class="fireworkParticle"><img src="image/particles.gif" alt="" /></div>
  </div>
<div id="fireContainer"></div>

The function that will doing the job for us createFirework().
  • nRadius – It is the percentage window size that will be used (1-100)
  • nParticles – Number of elements that will show up after the explosion (1-200)
  • nCircles – Total number of cirlces to show up after the explosion (0-8)
  • nBurstType – the base color (1-7)
  • startX – start position i.e. left to right (1-100)
  • startY– start position top to bottom (1-100)
  • burstX – the burst position left to right (1-100)
  • burstY – – the burst position top to bottom (1-100)
  • allowRandom– the particles will explode randomly (true or false)
  • obeyBoundaries – the explode particles go beyond the window document (true or false)

If the sound does not play check if you browser support flash or try it in a server.

//syntax
createFirework(nRadius,nParticles,nCircles,nBurstType,startX,
startY,burstX,burstY,allowRandom,obeyBoundaries);

// example
createFirework(100,100,1,null,50,100,50,50,false,true);

How to autoplay the firework

If you want the firework to play automatically after the page loads you will need to add a timer to that will load firework function after a certain time. Here a quick hack to the code.

Add a jquery library first. You can use on onload function in the body tag too. But I personally love jquery.

<script>
var c=0;
var t;
var poping=0;

function displayFireworks() {
	createFirework(25,187,7,1,null,null,null,null,false,true);
	t=setTimeout(function(){displayFireworks()},2000);
}

function doTimer() {
if (!poping) {
  poping=1;
  displayFireworks();
  }
}

function stopCount() {
clearTimeout(t);
poping=0;
}

$( window ).load(function() {
  displayFireworks();
});
</script>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Wishing you and your family a very happy Diwali.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

nikhat on

wow keep it up..

Reply
Vivek Arzare on

I want to add this lovely jquery . I have download script but no CSS . so please provide me css.

Reply
Shahrukh Khan on

please check the zip folder that you have downloaded. it has css in “css” folder

Reply
arihamzah on

thanks I love it

but I try to modified want the firework to play automatically after the page loads. but not work.

how ?? to automatically after the page loads ??

help me

Reply
Shahrukh Khan on

create a JavaScript function and call it onpageload
on body tag use onload="yourFunction();"

Reply
vishal on

i need zip of this file how i got it

Reply
Shahrukh Khan on

Please click on the social button at the end of this article you will get the download link

Reply
Haidar Raza Khan on

Can i add this in my blog?

Reply
Shahrukh Khan on

yes you can..

Reply
Ravi on

Nice bro good work

Reply
Shahrukh Khan on

Thanks

Reply
Madhi on

Great Work Bro…!!! Just step forward…. 🙂

Reply
Iktou Sama on

no audio is working in the audio files.

Reply
Sujon Kumar Roy on

Wow!! Just Awesome work.. Dear friend..Keep it up…
I am Sujon Kumar Roy from Bangladesh

Reply
Shahrukh Khan on

Thanks

Reply
Love Kaushik on

Awesome.. Can i use it in blogger?

Reply
Shahrukh Khan on

Yes you can, just provide me a backlink will appreciate it.

Reply
Akash on

Nice work but when i using for autoplay its not working. Please help.

Reply
Shahrukh Khan on

try to check with the options available in the methods.

Reply
SongsPagalworld on

Thanks Shahrukh. You just made my day. I have added the codes to all my websites and they are looking awesome. Happy Diwali

Reply
Shahrukh Khan on

Thanks

Reply
Hemant on

Hi if i want on load pupops and auto-start and auto close

Reply
Shahrukh Khan on

means?

Reply
keerthi on

i just need sound of the firework how can i apply

Reply
Shahrukh Khan on

download the zip. it has the sound file.

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.