PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest
background
The theme of this activity is the Spring Festival Creative competition. The first thing that comes to my mind during the Spring Festival is fireworks. In the past, wuhan River Beach would have a New Year’s Eve fireworks show. Because of the epidemic and environmental protection, there has been no fireworks show in Wuhan for many years, so I want to use the code to achieve the fireworks show. Without further ado, let’s look at the code:
technology
- animejs
- jquery
implementation
A static page
- html
<div class="sky"></div>
Copy the code- css
* {
margin: 0;
padding: 0;
}
.sky {
width: 100vw;
height: 100vh;
background-image: url("./img/yejing.jpg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 110% 110%;
transform-origin: 50% 50%;
overflow: hidden;
position: relative;
}
.firework {
width: 5px;
height: 5px;
position: absolute;
bottom: 5px;
left: 50%;
opacity: 0;
border-radius: 999px;
}
.firecracker {
width: 5px;
height: 5px;
position: absolute;
border-radius: 10px;
}
Copy the codeWith the above code you can achieve a static page (wuhan River Beach night map), the effect is as follows:
Implement fireworks animation
Ask: “how many steps to realize fireworks?”
Answer: “1. Fireworks fly, 2. Fireworks explode”
Let’s start with the code base
<script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
Copy the codeNow let’s implement these two steps
1 fireworks heaven JS code
- Create the fireworks
let $targets = $("<div class='firework'></div>");
$(".sky").append($targets);
Copy the code- The fireworks heaven
Firework($targets);
let Firework = ($targets) = > {
let left = Math.ceil(100 * Math.random()) + The '%';
let bottom = Math.ceil(150 * Math.random()) + clientHeight / 2;
let color = 'linear-gradient(rgb(' + Math.ceil(Math.random() * 255) + ', ' + Math.ceil(Math.random() * 255) + ', 255), rgba(0, 0, 255, 0))';
let delay = 1000 * Math.ceil(5 * Math.random());
$targets.css({
"background": color,
"left": left,
});
anime({
targets: $targets[0].bottom: bottom,
height: [5.100.0].duration: 2000.delay: delay,
easing: 'linear'}); }Copy the code2. Fireworks explosion JS code
- Create fireworks Mars
let renderFireworkPoint = () = > {
let html = ' ';
for (let i = 0; i < 20; i++) {
html += `<div class="firecracker point${i}"></div>`
}
return html;
}
Copy the code- The explosion animation
let animeFireworkPoint = ($targets, r) = > {
// Quadrant 1
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + i);
let deg = Math.PI / 2 / 5 * i;
animeFireworkPointFunc(targets, deg, r);
}
// Quadrant 2
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + (i + 5));
let deg = Math.PI / 2 / 5 * i + Math.PI / 2;
animeFireworkPointFunc(targets, deg, r);
}
// Quadrant 3
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + (i + 10));
let deg = Math.PI / 2 / 5 * i + Math.PI;
animeFireworkPointFunc(targets, deg, r);
}
// Quadrant 4
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + (i + 15));
let deg = Math.PI / 2 / 5 * i + Math.PI / 2 + Math.PI; animeFireworkPointFunc(targets, deg, r); }}let animeFireworkPointFunc = function ($targets, deg, r) {
let translateX = r * Math.cos(deg);
let translateY = -1 * r * Math.sin(deg);
anime({
targets: $targets[0].translateX: { value: translateX },
translateY: { value: translateY },
direction: 'normal'.duration: 1000.// The duration
autoplay: true.// Auto play
easing: 'easeOutBack'.// Time curve
complete: () = >{ anime.remove($targets); $targets.remove(); }}); }Copy the code
More than the fireworks
- What? One firework is not enough, let’s try 50!!
for (let i = 0; i < 50; i++) {
let $targets = $("<div class='firework'></div>");
$(".sky").append($targets);
Firework($targets);
}
Copy the codeLet me see the effect
The complete code
let clientWidth = document.body.clientWidth
let clientHeight = document.body.clientHeight
$(() => {
for (let i = 0; i < 50; i++) {
let $targets = $("<div class='firework'></div>");
$(".sky").append($targets); Firework($targets); }});let Firework = ($targets) = > {
let left = Math.ceil(100 * Math.random()) + The '%';
let bottom = Math.ceil(150 * Math.random()) + clientHeight / 2;
let color = 'linear-gradient(rgb(' + Math.ceil(Math.random() * 255) + ', ' + Math.ceil(Math.random() * 255) + ', 255), rgba(0, 0, 255, 0))';
let delay = 1000 * Math.ceil(5 * Math.random());
$targets.css({
"background": color,
"left": left,
});
let tl = anime.timeline({
targets: $targets[0].delay: delay,
opacity: 1.duration: 500
});
tl.add({
targets: $targets[0].bottom: bottom,
height: [5.100.0].duration: 2000.delay: delay,
easing: 'linear'.complete: () = > {
let $html = $(renderFireworkPoint());
$(".sky").append($html);
$html.closest(".firecracker").css({ left, bottom, background: color });
animeFireworkPoint($html, 60); $targets.remove(); }}); }let renderFireworkPoint = () = > {
let html = ' ';
for (let i = 0; i < 20; i++) {
html += `<div class="firecracker point${i}"></div>`
}
return html;
}
let animeFireworkPoint = ($targets, r) = > {
// Quadrant 1
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + i);
let deg = Math.PI / 2 / 5 * i;
animeFireworkPointFunc(targets, deg, r);
}
// Quadrant 2
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + (i + 5));
let deg = Math.PI / 2 / 5 * i + Math.PI / 2;
animeFireworkPointFunc(targets, deg, r);
}
// Quadrant 3
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + (i + 10));
let deg = Math.PI / 2 / 5 * i + Math.PI;
animeFireworkPointFunc(targets, deg, r);
}
// Quadrant 4
for (let i = 0; i < 5; i++) {
let targets = $targets.closest('.point' + (i + 15));
let deg = Math.PI / 2 / 5 * i + Math.PI / 2 + Math.PI; animeFireworkPointFunc(targets, deg, r); }}let animeFireworkPointFunc = function ($targets, deg, r) {
let translateX = r * Math.cos(deg);
let translateY = -1 * r * Math.sin(deg);
anime({
targets: $targets[0].translateX: { value: translateX },
translateY: { value: translateY },
direction: 'normal'.duration: 1000.// The duration
autoplay: true.// Auto play
easing: 'easeOutBack'.// Time curve
complete: () = >{ anime.remove($targets); $targets.remove(); }}); }Copy the codeconclusion
- First of all thank you very much to see here, this article is to share here, I wish you a happy New Year, tiger tiger, dragon live tiger
- If you have help or harvest, praise and encourage! Thanks!!
The articles
-
The front end of “Xi ‘an Jiayou” simply realizes 2.5D Big Wild Goose Pagoda
-
Implement the firecracker timer with SVG
-
Front-end collection, commonly used online picture site