jQuery fireworks animation effects using fireworks js
Make money for being or staying online/internet.

You will get a $5 starting gift when you join using this link:: GET THE OFFER NOW!!

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

Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW

Related Post(s)

» jQuery fireworks animation effects using fireworks js

» How to create a FAQ section

» jQuery DataTable Tutorial With Materialize CSS Design For Beginners

collections_bookmark Category :: Jquery
date_range Published :: 2 years ago At: 02:18 PM
event_note Detailed Date :: Dec 27th, 2019
person Writer :: Code
  • RECENT POSTS
1 year ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.


1 year ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.


1 year ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.


1 year ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.


1 year ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.


1 year ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?


1 year ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).


2 years ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share