Realistic fireworks special effects plug-in based on HTML5 canvas

Brief Tutorial

jquery-fireworks is a jQuery plug-in for realistic fireworks special effects based on HTML5 Canvas. The plugin is simple to use and freely configurable. It can generate realistic fireworks effects in a div container.

Usage method

Introduce jquery and jquery.fireworks.js files into the page.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fireworks.js"></script>

HTML structure

Use a

element as a container for fireworks.

<div class="demo"></div>

Initialization plug-in

After the page DOM element is loaded, you can initialize the fireworks special effects plug-in through the fireworks() method

$('.demo').fireworks({ 
  sound: true, // 声音效果
  opacity: 0.9, 
  width: '100%', 
  height: '100%'
});

The github of the HTML5 canvas fireworks special effects plug-in The address is: https://github.com/mgrigajtis/jquery-fireworks

The above is the content of the realistic fireworks special effects plug-in based on HTML5 canvas. For more related content, please pay attention to the PHP Chinese website (www.php.cn )!

Related labels：

HTML5，canvas，烟花特效

source：php.cn

Previous article：15 different appearance clock js plug-ins based on canvas Next article：18 kinds of text animation special effects based on anime.js

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• Video material on building your own PHP framework from scratch
  2023-03-15 16:54:01
• Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function
  2023-03-15 12:26:02
• Introduction to how to receive emails in IMAP in php
  2023-03-14 18:58:01
• Example of how to quickly implement array deduplication in PHP
  2023-03-14 11:30:01
• Summary of the use of all attributes of the tag in html
  1970-01-01 08:00:00
• Summary of basic knowledge of PHP (necessary for beginners to get started)
  2023-03-16 15:20:01
• Introduction to the use of typeof in JavaScript
  1970-01-01 08:00:00
• Introduction to the use of confirm() method in JavaScript
  1970-01-01 08:00:00
• A detailed introduction to the HTML5 Placeholder attribute
  1970-01-01 08:00:00
• How to implement single-select, multiple-select and reverse-select in forms in ReactJS
  1970-01-01 08:00:00

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

3

2262

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

11

2398

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

2011

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1893

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1964

Related Topics

More>

• What are the production methods of html5 animation production?
• The difference between HTML and HTML5
• The difference between get request and post request
• The difference between UCOS and linux
• Steps to delete one of dual systems
• Solution to Win7 folder properties not sharing tab page
• Introduction to carriage return and line feed characters in java
• System vulnerability type