PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see the Spring Festival creative submission contest for details
Project screenshots
The page is displayed
Click on the button
Click on the animation after
The screen after the fireworks are over
Code implementation
Technologies involved: HTML5 multimedia, CSS positioning, animation, JS object-oriented, Jquery animation, events
Let’s start with the HTML code
<! DOCTYPEhtml>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>2022</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
<script src=". / js/jquery - 3.6.0. Min. Js. ""></script>
<script src="./js/index.js"></script>
</head>
<body>
<! -- This is a button click box, kind of a smoke cone -->
<div class="he">
<! -- This is the click button, click on the start to do some processing -->
<button id="fire"></button>
</div>
<! -- These are fireworks -->
<div class="box">
</div>
<! <div class="title"></div> <! -- This is the big box that randomly generates greetings.
<div class="greetings">
<! -- You can use this div to dynamically render blessings, default is the first one is tiger tiger.
<div class="yu"><span id="blessing">Powerful,</span></div>
<! Click the button and stop the flash ->
<button id="btn">Check my blessings</button>
</div>
<audio src="./meiti/chuxi.mp3"></audio>
<audio src="./meiti/yanhua.mp3"></audio>
</body>
</html>
Copy the codeThe HTML code structure above is, Fireworks box (.he), ignition button (.fire), fireworks (.box), logo(.title), box (.greetings), concrete container (.yu and.blessing), pause quick display button (.bTN), two audio. There are 10 important elements.
Now let’s look at the CSS code
/* Clears the default margin */
* {
margin: 0;
padding: 0;
}
/* Import the font to set on the message */
@font-face {
font-family: 'djs';
src: url(../font/datk6.ttf);
}
/* Set the body beyond hiding, because later fireworks will exceed, causing the page to be spread */
body {
/* background: #EF3D04; * /
overflow: hidden;
background: #F35708 url(../images/hebj.png)no-repeat center center/100% 100%;
}
/* Fireworks box we made it bottom center aligned */
.he {
position: absolute;
width: 160px;
height: 120px;
background: url(../images/hebj.png)no-repeat center center/100% 100%;
border-radius: 5px 5px 0 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
transition: all 3s;
}
.he button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #C33830;
box-shadow: 0 0 5px #D7A057.0 0 2px #D7A057 inset;
border-radius: 5px;
width: 50px;
height: 50px;
background: transparent url(../images/huzhua.png)no-repeat center center/100% 100%;
font-size: 12px;
color: yellow;
font-weight: 700;
}
/* Fireworks box, we also want to make it at the bottom of the center alignment, later we through animation, change the top value, to achieve the effect of launching from bottom to top */
.box {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
transition: all;
top: calc(100% - 50px);
left: 50%;
transform: translateX(-50%);
}
/* This is the fireworks generated by the small dots, that is, which is the color of the small dots, after the js random generated number, location, size, because it is random all this set absolute positioning, do not give specific top and left values */
.box span {
position: absolute;
display: inline-block;
border-radius: 50%;
}
/* When the box reaches the specified top value, we can add the animation style to the box. The specific effect of the animation is described below */
.fire {
left: 50%;
transform: translateX(-50%);
animation: suofang 4.5 s linear;
}
/* Year of the Tiger 2022 logo style */
.title {
position: absolute;
width: 300px;
height: 150px;
background: url(../images/hunian.png)no-repeat center center/100% 100%;
top: 10px;
left: 50%;
transform: translateX(-50%);
transition: all 1s;
display: none;
}
/* The top value of.title must be added */
.greetings {
position: absolute;
top: 180px;
width: 260px;
height: 400px;
background: #FFE5C8;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
box-sizing: border-box;
border-radius: 20px;
overflow: hidden;
opacity: 0;
}
/* This is the second box for displaying sentences, and its purpose is to keep the text vertically aligned and centered */
.yu {
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb;
width: 100%;
height: 85%;
border-radius: 10px;
background: url(../images/zhufu.png)no-repeat center center/100% 100%;
}
/* This is the body of the blessing and display box, here mainly set the font style */
#blessing {
font-size: 50px;
font-weight: 800;
color: rgba(0.0.0.0.74);
letter-spacing: 6px;
font-family: 'djs';
}
/* Pause button */
#btn {
width: 100%;
height: 15%;
margin-top: 50px;
border-radius: 10px;
border: 1px solid #D7A057;
color: #D7A057;
font-size: 14px;
font-weight: 700;
background: url(../images/btn.png)no-repeat center center/100% 100%;
}
If the parent element is scaled, the child element will be scaled with it. If the parent element is scaled, the child element will be scaled with it
@keyframes suofang {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(20);
opacity:.5;
}
100% {
transform: scale(100);
opacity: 0;
display: none; }}Copy the codeAbove the CSS code, you can see that I used a lot of positioning. This is because the rest of the animation will require localization based left and top.
Now that we have the structure and style, let’s look at JS (behavior)
JavaScript code
1. Generate firework balls and fireworks
$(function() {
// encapsulate a random number generation function, convenient later random generation fireworks fireworks number, size, location
function rand(min, max) {
return Math.random() * (max - min) + min;
}
// Create a constructor that calls a random function to generate a random number between 500 and 1000 to generate the number of fireworks
function Birth() {
this.sum = parseInt(rand(500.1000));
}
// Add a random position/size function to the prototype object of the constructor, which calls the random function defined previously
Birth.prototype.suiji = function() {
// Generate a random X coordinate
this.x = parseInt(rand(0.50));
// Generate a random Y coordinate
this.y = parseInt(rand(0.50));
// Randomly generate a width, because the generated fireworks are perfectly round, so the width and height of the generated fireworks are equal
this.w = parseInt(rand(1.3));
// Generate a random RGB color (0-255)
this.color = parseInt(rand(0.255));
// Return the generated object (throw)
return this;
}
// Instantiate the above constructor as an object so that the object can access all the data generated by the above constructor
const qiu = new Birth();
// Define a document fragment to optimize application performance (reduce page redrawing and backflow)
const jsbox = document.createDocumentFragment();
// Use a loop to generate fireworks, where fireworks are represented by the SPAN tag
for (var i = 0; i < qiu.sum; i++) {
// Get the x coordinates generated by this loop
var x = qiu.suiji().x;
// Get the y coordinates generated by this loop
var y = qiu.suiji().y;
// Get the height and width generated by this loop
var w = qiu.suiji().w;
// Generate a SPAN element and append it to the document fragment
$(jsbox).append('<span></span>').children().eq(i).css({ 'background': `rgb(${qiu.suiji().color}.${qiu.suiji().color}.${qiu.suiji().color}) `.'width': w, 'height': w, 'left': x, 'top': y });
}
// Append the document fragment to the fireworks box
$('.box').append(jsbox);
})
Copy the code2, blessing quick switch and pause view
// We will need to display the blessing, write in the array, later through the array is ok
const arr = ['Tiger tiger is alive'.'Rolling in money'.The Year of the Tiger.'Strong in the air'.'Tiger Yue Spring Festival'.'Tiger, Tiger, Tiger'];
// Declare a global variable used to access arrays as subscripts
let ind = 0;
/* Declare a global variable, used as a throttle valve, to prevent the user repeatedly click on the timer stacking, wish message switch too fast, but also to prevent the user repeatedly click on the BGM playback */
let isok = false;
// Define a global variable to store the timer in the page
let t;
// Quickly switch the function of blessing message
function setZf() {
// Execute the code in the timer every 0.01 seconds
t = setInterval(function() {
/* Determine if ind is equal to the array length -1, in case the index exceeds the actual length of the array and is undefinde, if yes, ind is set to zero, if not, continue to add */
if (ind >= arr.length - 1) {
ind = 0;
} else {
ind++;
}
/* Render the message from the array to the page */
$('#blessing') [0].innerHTML = arr[ind];
}, 10);
}
/* Call the above function to start executing the page as soon as it opens, because its CSS style is hidden, so the user can't see the page even when it opens */
setZf();
/* When the pause button is clicked, we begin to judge that the throttle valve is true, and call the above function to achieve the effect of switching blessing, and close the throttle valve */
$('#btn') [0].onclick = function() {
if (isok) {
setZf();
isok = false;
} else {
/* If the throttle is closed (isOK =false), clear the timer, reach the pause effect, and then open the throttle for the next switch */
clearInterval(t);
isok = true; }}Copy the code3. What you do when you click the Fire button
// Get the element and reassign
const box = $('.box');
const fire = $('#fire');
let count;
// When the ignition button is clicked, the fireworks launch BGM will start playing immediately, and the button will be set to prohibit clicking, to prevent users from clicking repeatedly, resulting in BUG overlap
fire[0].onclick = function() {$('audio') [1].play();
fire[0].disabled = true;
}
// When the fire button is clicked, play the New Year BGM using the event's slight delay effect (just before the fireworks launch BGM ends)
fire.click(function() {$('audio') [0].play();
// Add CSS styles to the fireworks box to center the fireworks
box.css({
left: '50%'.transform: 'translateX(-50%)',})/* Add an animation to the firework box and change the top value. The animation ends when top equals 100px. Since the box's top value is at the bottom of the screen, change the top value to 100px to create a visual effect of slowly moving up. * /
box.animate({
top: '100px'./* The function that starts executing after the animation ends */
}, function() {
/* When the firework ball reaches the specified position, add the CSS style with animation (zoom) effect to achieve the visual effect of the firework bloom */
box.addClass('fire');
/* Use timer to judge whether the fireworks bloom is complete, let the fireworks hide when the bloom is complete, let the year of the Tiger 2022 logo display, let the blessing box display */
count = setInterval(() = > {
if (Math.abs(box.offset().top) == 100) {
box.css({ 'opacity': '0'$(})'.he').hide();
$('.title') [0].style.display = 'block';
$('.greetings') [0].style.opacity = '1';
$('body').css({
})
clearInterval(count); }},100);
});
})
Copy the codeThat’s all the code for this project. Once again, I wish you a happy New Year, a prosperous and prosperous Year of the Tiger. Project experience link: www.starqin920.cn/chuxi/index…