Article directory
Preface
In this year of 2024, which is full of hope and excitement, the new year is about to begin, and the innovation and development of digital technology is also in full swing. The colorful display of fireworks has always been an indispensable element in New Year celebrations.
如何利用技术的魔力，创造出炫目绝伦的数字烟花，成为了技术爱好者们所追寻的目标. In this technical blog, I will lead you to explore how to use the magic of code to create stunning digital fireworks effects to add a splash of color to New Year's Eve. Let us welcome the arrival of 2024 together and use technological innovation to draw a brilliant prelude to the new year.
Fireworks effect display
The style of fireworks can be customized, and the background music can be chosen to simulate the sound of very real fireworks. When you package the code and send it to your friends to open, the New Year atmosphere reaches its peak at this moment. Maybe you left your hometown and were busy with work and study this year. Maybe you had a prosperous life this year and were doing the job you like. Or maybe your life was unsatisfactory this year and the New Year is coming. At this time, forget all your worries, spend more time with your parents at home, and go out to party with friends. Let’s start all over again in 2024!
Tutorial
The code has been packaged, click to download and use it for free. Whether you want to download the research code yourself, or you are a novice and want to send it to friends for appreciation, it is highly recommended. The following is a step-by-step tutorial to show you the romantic fireworks brought by code with zero basic knowledge. If you cannot download, please leave a message.
Step 1 : Download the code compressed package file and unzip it.
Step 2 : Open the decompressed folder, and you can see three files. If you want to try the effect, double-click .htmlthe file with the suffix to open it in the browser and run it.
Step 3 : If you want to study the front-end code, we can take a look. There are three files stored in the folder, namely:
- HTML file
- CSS files
- JavaScript files
These three parts are what we often call the Three Musketeers of the front-end. They are the basic content of the front-end and constitute the front-end technology stack. Among them, HTML is responsible for the structural part, it is like a skeleton, CSS, also called cascading style sheets, is responsible for beautifying the page, and JavaScript is responsible for interactive logic. Interested friends can read this basic tutorial article: One article will take you through HTML
For novices, there are many tutorials on the Internet, which can be said to be dazzling. Isn’t this method much more convenient? There is no need for you to create a new Notepad file. Haha, the point is still to learn something in the code, the fireworks are just for the New Year atmosphere! !
View source code
HTML code
Due to the length of the article, only part of the code examples are shown. HTML supports the general framework of the entire page. If you want to add a button, an input box, etc. to the page. It is the skeleton of the page and is responsible for the structural part of the page.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas超逼真烟花绽放动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="apple-touch-icon-precomposed" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- App -->
<div class="container">
<div class="loading-init">
<div class="loading-init__header">Loading</div>
<div class="loading-init__status">Assembling Shells</div>
</div>
<div class="stage-container remove">
<div class="canvas-container">
<canvas id="trails-canvas"></canvas>
<canvas id="main-canvas"></canvas>
</div>
<div class="controls">
<div class="btn pause-btn">
<svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg>
</div>
<div class="btn sound-btn">
<svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg>
</div>
<div class="btn settings-btn">
<svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg>
</div>
</div>
<div class="menu hide">
<div class="menu__inner-wrap">
<div class="btn btn--bright close-menu-btn">
<svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg>
</div>
<div class="menu__header">Settings</div>
<div class="menu__subheader">For more info, click any label.</div>
<form>
<div class="form-option form-option--select">
<label class="shell-type-label">Shell Type</label>
<select class="shell-type"></select>
</div>
<div class="form-option form-option--select">
<label class="shell-size-label">Shell Size</label>
<select class="shell-size"></select>
</div>
<div class="form-option form-option--select">
<label class="quality-ui-label">Quality</label>
<select class="quality-ui"></select>
</div>
<div class="form-option form-option--select">
<label class="sky-lighting-label">Sky Lighting</label>
<select class="sky-lighting"></select>
</div>
<div class="form-option form-option--select">
<label class="scaleFactor-label">Scale</label>
<select class="scaleFactor"></select>
</div>
<div class="form-option form-option--checkbox">
<label class="auto-launch-label">Auto Fire</label>
<input class="auto-launch" type="checkbox" />
</div>
<div class="form-option form-option--checkbox form-option--finale-mode">
<label class="finale-mode-label">Finale Mode</label>
<input class="finale-mode" type="checkbox" />
</div>
<div class="form-option form-option--checkbox">
<label class="hide-controls-label">Hide Controls</label>
<input class="hide-controls" type="checkbox" />
</div>
<div class="form-option form-option--checkbox form-option--fullscreen">
<label class="fullscreen-label">Fullscreen</label>
<input class="fullscreen" type="checkbox" />
</div>
<div class="form-option form-option--checkbox">
<label class="long-exposure-label">Open Shutter</label>
<input class="long-exposure" type="checkbox" />
</div>
</form>
<div class="credits">
Passionately built by <a href="https://cmiller.tech/" target="_blank">Caleb Miller</a>.
</div>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'></script><script src="./script.js"></script>
</body>
</html>
CSS code
Of course, a page using only HTML is very monotonous. We also need to beautify the page, and at this time we need to add CSS code.
.help-modal__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition-property: opacity;
transition-timing-function: ease-in;
transition-duration: 0.25s;
}
.help-modal__dialog {
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
max-height: calc(100vh - 100px);
margin: 10px;
padding: 20px;
border-radius: 0.3em;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
transform: scale(0.9, 0.9);
transition-property: opacity, transform;
transition-timing-function: ease-in;
transition-duration: 0.25s;
}
JavaScript
JavaScript handles the interaction logic of the code, which is a very important part and also a difficult part.
function toggleSound(toggle) {
if (typeof toggle === 'boolean') {
store.setState({
soundEnabled: toggle });
} else {
store.setState({
soundEnabled: !store.state.soundEnabled });
}
}
function toggleMenu(toggle) {
if (typeof toggle === 'boolean') {
store.setState({
menuOpen: toggle });
} else {
store.setState({
menuOpen: !store.state.menuOpen });
}
}
function updateConfig(nextConfig) {
nextConfig = nextConfig || getConfigFromDOM();
store.setState({
config: Object.assign({
}, store.state.config, nextConfig)
});
configDidUpdate();
}
// Map config to various properties & apply side effects
function configDidUpdate() {
const config = store.state.config;
quality = qualitySelector();
isLowQuality = quality === QUALITY_LOW;
isNormalQuality = quality === QUALITY_NORMAL;
isHighQuality = quality === QUALITY_HIGH;
if (skyLightingSelector() === SKY_LIGHT_NONE) {
appNodes.canvasContainer.style.backgroundColor = '#000';
}
Spark.drawWidth = quality === QUALITY_HIGH ? 0.75 : 1;
}
new year wishes
In the New Year of 2024, I wish you more happiness, health and success in the new year. May you have firm faith, take solid steps, realize your dreams, and create a better future. I wish you all your wishes come true, everything goes well, happiness and health, and unlimited joy in the new year! May 2024 be full of hope and light and bring you endless joy