fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
jQuery fireworks animation effects using fireworks js

Hey friend, I would like to wish you a Happy New Year with the hope that you will have many blessings. Out with the old, in with the new: may you be happy the whole year through. Happy New Year!

Alright back to the topic, In this simple post, I have included the source code of Realistic Fireworks Animations Using jQuery And Canvas - fireworks.js

It is a simple and easy to use fully configurable jQuery plugin used to create realistic fireworks animations with explosion sound effects for celebrations as you may see in the video below.

Step 1

Download the plugin from ,here and then put the jquery.fireworks.js script after the jQuery library. Below i posted a CDN link to the latest jquery library as by the published date.

Make sure you visit this page for the latest JQuery. CHECK NEW VERSION

copy
Step 2

After linking the required files, Create an element where you want the fireworks animations should be placed. In the tutorial i used a div with the class of demo.

The h1 i used an extra tip. Making it optional.

copy
	
<div class="demo">
<h1>Happy New year   <br> 2020  </h1>
</div>

Step 3

Finally, Initialize the plugin by calling the fireworks function as shown below:

copy

$(".demo").fireworks({
	opacity: 0.4, // Sets the opacity on the page
	sound: true // if you want users to hear the firework sound
});

I will always put out free content on my YouTube Channel, but showing your support, subscribing to it, pushes me and gives me motivation, not because of the money, but because it feels like people really appreciate what I do. SUBSCRIBE TO:: Oston Code Cypher

Related Post(s)

» How to create a FAQ section

» jQuery DataTable Tutorial With Materialize CSS Design For Beginners

» jQuery fireworks animation effects using fireworks js

collections_bookmark Category :: Jquery
date_range Published :: 3 months ago At: 02:18 PM
event_note Detailed Date :: Dec 27th, 2019
person Writer :: Code

YOU MAY LIKE THESE POSTS

share