New Year’s Day, come to set off firecrackers?

PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest “.

Here in advance to wish you a happy New Year ah, I do not know you have such a feeling, why the more grown up, the more feel that the Chinese New Year did not taste? Recall when I was a child and friends with firecrackers to the field to see what fried what days, is really far away, now is not as together as that, so on the Internet to set off firecrackers together!

preview

implementation

First, VUE implementation

template

<template>
  <div id="app">
    <div class="firecrackers">
      <div class="Stick"></div>
      <div class="line">
        <div v-for="n in crackerNum" :key="n" class="cracker"></div>
        <div class="fire" v-for="n in 10" :key="n"></div>
        <audio
          src="./assets/ firecrackers. Mp3"
          controls="controls"
          preload
          id="music"
          hidden
        ></audio>
      </div>
    </div>
    <div class="play" @click="play()">Some fireworks</div>
  </div>
</template>
Copy the code

script

Initialize the style of the firecracker

Initialize the style of the firecrackers so that they are tilted left and right.

// Initialize the firecracker
initCrackers() {
    let crackers = document.getElementsByClassName("cracker");
    let num = 0;
    let j = 0;
    while (crackers.length > j) {
        for (let i = 0; i < 2; ++i) {
            let cracker = crackers[j];
            j++;
            cracker.style.top = num * this.crackerHeight + "px";
            if (j % 2= =0) {
                cracker.style.transform = "rotate(30deg)";
                cracker.style.left = "-5px";
            } else {
                cracker.style.transform = "rotate(-30deg)"; } } num++; }},Copy the code

Initialization spark

Initialize sparks to generate sparks randomly arranged within a certain range

// Initialize the spark
initFires() {
    let fires = document.getElementsByClassName("fire");
    for (let i = 0; i < fires.length; i++) {
        fires[i].style.top =
            this.crackerHeight * (this.crackerNum / 2) +
            parseFloat(this.getRandom(2)) +
            "px";
        fires[i].style.left = parseFloat(this.getRandom(10)) + "px"; }},getRandom(n) {
        let r = Math.random() * n;
        let flag = Math.random();
        if (flag > 0.5) return -r;
        returnr; }},Copy the code

Lighting firecrackers

Click on burning firecrackers to add falling effect and firecrackers sound

/ / some crackers
play(len = "") {
    let crackers = document.getElementsByClassName("cracker");
    let fires = document.getElementsByClassName("fire");
    let audio = document.getElementById("music");
    if (audio.paused) {
        audio.play(); / / play
    }
    if (len == "") len = crackers.length - 1;
    crackers[len].classList.add("to-smoke");
    crackers[len - 1].classList.add("to-smoke");
    setTimeout(() = > {
        crackers[len].remove();
        crackers[len - 1].remove();
    }, 5000);
    for (let i = 0; i < fires.length; i++) {
        fires[i].style.display = "block";
        fires[i].style.top =
            parseInt(fires[i].style.top) - this.crackerHeight + "px";
    }
    setTimeout(() = > {
        if (len - 2> =0) {
            this.play(len - 2);
        } else {
            for (let i = fires.length - 1; i >= 0; i--) { fires[i].remove(); audio.pause(); }}},this.speed);
},
Copy the code

css

Particle scintillation animation simply simulates sparks

@keyframes fireAni {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; }}Copy the code

Falling effect of firecrackers after burning

@keyframes smoky {
    to {
        background-color: whitesmoke;
        transform: translate3d(200px.80px.0) rotate(-40deg) skewX(70deg)
            scale(1.5);
        text-shadow: 0 0 20px whitesmoke;
        opacity: 0; }}Copy the code

The complete code

<template> <div id="app"> <div class="firecrackers"> <div class="Stick"></div> <div class="line"> <div v-for="n in crackerNum" :key="n" class="cracker"></div> <div class="fire" v-for="n in 10" :key="n"></div> <audio SRC ="./assets/ firecrackers. Mp3 "controls ="controls" preload ID ="music" hidden ></audio> </div> </div> <div class="play" @click="play()" </div> </div> </template> <script> export default {name: "app", components: {}, data() {return {crackerHeight: 12, // speed: 200, // ms crackerNum: 80, // number of crackers}; }, methods: { init() { this.initCrackers(); this.initFires(); this.initLine(); } / / some crackers play (len = "") {let crackers. = the document getElementsByClassName (" cracker"); let fires = document.getElementsByClassName("fire"); let audio = document.getElementById("music"); if (audio.paused) { audio.play(); } if (crackers == "") len = crackers. Length-1; crackers[len].classList.add("to-smoke"); crackers[len - 1].classList.add("to-smoke"); setTimeout(() => { crackers[len].remove(); crackers[len - 1].remove(); }, 5000); for (let i = 0; i < fires.length; i++) { fires[i].style.display = "block"; fires[i].style.top = parseInt(fires[i].style.top) - this.crackerHeight + "px"; } setTimeout(() => { if (len - 2 >= 0) { this.play(len - 2); } else { for (let i = fires.length - 1; i >= 0; i--) { fires[i].remove(); audio.pause(); } } }, this.speed); }, / / initializes the fireworks initCrackers () {let crackers. = the document getElementsByClassName (" cracker "); let num = 0; let j = 0; while (crackers.length > j) { for (let i = 0; i < 2; ++i) { let cracker = crackers[j]; j++; cracker.style.top = num * this.crackerHeight + "px"; if (j % 2 == 0) { cracker.style.transform = "rotate(30deg)"; cracker.style.left = "-5px"; } else { cracker.style.transform = "rotate(-30deg)"; } } num++; }}, / / initializes the fireworks line initLine () {let line = document. The getElementsByClassName (" line ") [0]; line.style.height = this.crackerHeight * (this.crackerNum / 2) + "px"; }, / / initializes the spark initFires () {let fires = document. The getElementsByClassName (" fire "); for (let i = 0; i < fires.length; i++) { fires[i].style.top = this.crackerHeight * (this.crackerNum / 2) + parseFloat(this.getRandom(2)) + "px"; fires[i].style.left = parseFloat(this.getRandom(10)) + "px"; } }, getRandom(n) { let r = Math.random() * n; let flag = Math.random(); If (flag > 0.5) return -r; return r; }, }, mounted() { this.init(); }}; </script> <style lang="scss" scoped> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; .firecrackers { position: relative; width: 60%; height: 60%; left: 20%; .Stick { background-color: grey; height: 300px; width: 5px; position: absolute; transform: rotate(45deg); } .line { background-color: grey; height: 300px; width: 2px; position: absolute; top: 43px; left: 106px; .cracker { width: 5px; height: 12px; background-color: red; position: absolute; } .fire { background-color: orange; width: 5px; height: 5px; border-radius: 50%; top: 300px; position: absolute; animation: fireAni 1s infinite; display: none; } } } .play { cursor: pointer; } .to-smoke { text-shadow: 0 0 0 whitesmoke; animation: smoky 5s; } @keyframes fireAni { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes smoky { to { background-color: whitesmoke; Transform: Translate3D (200px, 80px, 0) Rotate (-40deg) skewX(70deg) scale(1.5); text-shadow: 0 0 20px whitesmoke; opacity: 0; } } } </style>Copy the code

2. Native JS implementation

html

<body>
    <div id="app">
        <div class="firecrackers">
            <div class="Stick"></div>
            <div class="line"></div>
        </div>
        <div class="play" onclick="play()">Some fireworks</div>
        <audio
               src="./assets/ firecrackers. Mp3"
               controls="controls"
               preload
               id="music"
               hidden
               ></audio>
    </div>
</body>
Copy the code

script

Initialize the firecracker element

Initialize the style of the firecrackers so that they are tilted left and right.

// Initialize the firecracker
function initCrackers() {
    let crackers = document.getElementsByClassName("cracker");
    let num = 0;
    let j = 0;
    while (crackers.length > j) {
        for (let i = 0; i < 2; ++i) {
            let cracker = crackers[j];
            j++;
            cracker.style.top = num * crackerHeight + "px";
            if (j % 2= =0) {
                cracker.style.transform = "rotate(30deg)";
                cracker.style.left = "-5px";
            } else {
                cracker.style.transform = "rotate(-30deg)"; } } num++; }}Copy the code

Initialization spark

Generate flickering elements in a random range to simulate sparks.

// Initialize the spark
function initFires() {
    let fires = document.getElementsByClassName("fire");
    for (let i = 0; i < fires.length; i++) {
        fires[i].style.top =
            crackerHeight * (crackerNum / 2) + parseFloat(getRandom(2)) + "px";
        fires[i].style.left = parseFloat(getRandom(10)) + "px"; }}function getRandom(n) {
    let r = Math.random() * n;
    let flag = Math.random();
    if (flag > 0.5) return -r;
    return r;
}
Copy the code

Initialization page

Dynamically generate DOM elements using JS

function initPage() {
    let line = document.getElementsByClassName("line") [0];
    let temp = ` `;
    for (let i = 0; i < crackerNum; i++) {
        temp += `<div key="${i}" class="cracker"></div>`;
    }
    for (let i = 0; i < 10; i++) {
        temp += `<div key="${i}" class="fire"></div>`;
    }
    line.innerHTML = temp;
    initLine();
    initCrackers();
    initFires();
}
Copy the code

Lighting firecrackers

Click on burning firecrackers to add falling effect and firecrackers sound

/ / some crackers
function play(len = "") {
    let crackers = document.getElementsByClassName("cracker");
    let fires = document.getElementsByClassName("fire");
    let audio = document.getElementById("music");
    if (audio.paused) {
        audio.play(); / / play
    }
    if (len == "") len = crackers.length - 1;
    crackers[len].classList.add("to-smoke");
    crackers[len - 1].classList.add("to-smoke");
    setTimeout(() = > {
        crackers[len].remove();
        crackers[len - 1].remove();
    }, 5000);
    for (let i = 0; i < fires.length; i++) {
        fires[i].style.display = "block";
        fires[i].style.top =
            parseInt(fires[i].style.top) - crackerHeight + "px";
    }
    setTimeout(() = > {
        if (len - 2> =0) {
            play(len - 2);
        } else {
            for (let i = fires.length - 1; i >= 0; i--) {
                fires[i].remove();
                audio.pause();
            }
        }
    }, speed);
}
Copy the code

css

Particle scintillation animation simply simulates sparks

@keyframes fireAni {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; }}Copy the code

Falling effect of firecrackers after burning

@keyframes smoky {
    to {
        background-color: whitesmoke;
        transform: translate3d(200px.80px.0) rotate(-40deg) skewX(70deg)
            scale(1.5);
        text-shadow: 0 0 20px whitesmoke;
        opacity: 0; }}Copy the code

The complete code

<! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <div class="firecrackers">
                <div class="Stick"></div>
                <div class="line"></div>
            </div>
            <div class="play" onclick="play()">Some fireworks</div>
            <audio
                   src="./assets/ firecrackers. Mp3"
                   controls="controls"
                   preload
                   id="music"
                   hidden
                   ></audio>
        </div>
    </body>
    <script type="text/javascript">
        const crackerHeight = 12; // The height of the firecrackers
        const speed = 200; // Combustion speed ms
        const crackerNum = 80; // The number of firecrackers
        function initPage() {
            let line = document.getElementsByClassName("line") [0];
            let temp = ` `;
            for (let i = 0; i < crackerNum; i++) {
                temp += `<div key="${i}" class="cracker"></div>`;
            }
            for (let i = 0; i < 10; i++) {
                temp += `<div key="${i}" class="fire"></div>`;
            }
            line.innerHTML = temp;
            initLine();
            initCrackers();
            initFires();
        }
        / / some crackers
        function play(len = "") {
            let crackers = document.getElementsByClassName("cracker");
            let fires = document.getElementsByClassName("fire");
            let audio = document.getElementById("music");
            if (audio.paused) {
                audio.play(); / / play
            }
            if (len == "") len = crackers.length - 1;
            crackers[len].classList.add("to-smoke");
            crackers[len - 1].classList.add("to-smoke");
            setTimeout(() = > {
                crackers[len].remove();
                crackers[len - 1].remove();
            }, 5000);
            for (let i = 0; i < fires.length; i++) {
                fires[i].style.display = "block";
                fires[i].style.top =
                    parseInt(fires[i].style.top) - crackerHeight + "px";
            }
            setTimeout(() = > {
                if (len - 2> =0) {
                    play(len - 2);
                } else {
                    for (let i = fires.length - 1; i >= 0; i--) {
                        fires[i].remove();
                        audio.pause();
                    }
                }
            }, speed);
        }
        // Initialize the firecracker
        function initCrackers() {
            let crackers = document.getElementsByClassName("cracker");
            let num = 0;
            let j = 0;
            while (crackers.length > j) {
                for (let i = 0; i < 2; ++i) {
                    let cracker = crackers[j];
                    j++;
                    cracker.style.top = num * crackerHeight + "px";
                    if (j % 2= =0) {
                        cracker.style.transform = "rotate(30deg)";
                        cracker.style.left = "-5px";
                    } else {
                        cracker.style.transform = "rotate(-30deg)"; } } num++; }}// Initialize the firecracker
        function initLine() {
            let line = document.getElementsByClassName("line") [0];
            line.style.height = crackerHeight * (crackerNum / 2) + "px";
        }
        // Initialize the spark
        function initFires() {
            let fires = document.getElementsByClassName("fire");
            for (let i = 0; i < fires.length; i++) {
                fires[i].style.top =
                    crackerHeight * (crackerNum / 2) + parseFloat(getRandom(2)) + "px";
                fires[i].style.left = parseFloat(getRandom(10)) + "px"; }}function getRandom(n) {
            let r = Math.random() * n;
            let flag = Math.random();
            if (flag > 0.5) return -r;
            return r;
        }

        initPage();
    </script>
    <style>
        body {
            height: 100%;
            width: 100%;
            background-color: rgb(19.12.12);
        }
        #app {
            font-family: "Avenir", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }

        .firecrackers {
            position: relative;
            width: 60%;
            height: 60%;
            left: 20%;
        }
        .Stick {
            background-color: grey;
            height: 300px;
            width: 5px;
            position: absolute;
            transform: rotate(45deg);
        }
        .line {
            background-color: grey;
            height: 300px;
            width: 2px;
            position: absolute;
            top: 43px;
            left: 106px;
        }
        .cracker {
            width: 5px;
            height: 12px;
            background-color: red;
            position: absolute;
        }
        .fire {
            background-color: orange;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            top: 300px;
            position: absolute;
            animation: fireAni 1s infinite;
            display: none;
        }
        .play {
            cursor: pointer;
            color: whitesmoke;
        }
        .to-smoke {
            text-shadow: 0 0 0 whitesmoke;
            animation: smoky 5s;
        }
        @keyframes fireAni {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0; }}@keyframes smoky {
            to {
                background-color: whitesmoke;
                transform: translate3d(200px.80px.0) rotate(-40deg) skewX(70deg)
                    scale(0.5);
                text-shadow: 0 0 20px whitesmoke;
                opacity: 0; }}</style>
</html>

Copy the code

Said in the back

The code is a little ugly, the implementation effect is not very cool, just feel and do such a page to give themselves a little bit more flavor, here in advance to wish you a happy New Year, the year of the tiger tiger, tiger added wings.