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

One, foreword

The Spring Festival is coming, I hope you in 2022, like a tiger with wings, everything is round! Auspicious luck peace year, happy happy happy year, lucky year, bonanza rich year, all the best year, happy reunion festival year, wish you everything goes well in the New Year, but peace, year after year!

Second, effect display

1. Timing of Spring Festival

2. Tiger Year decorations

  • Two tiger year dynamic ornaments, the left is a prosperous tiger, the right is a happy tiger, I wish you all in the New Year, no matter what you encounter will be prosperous, happy.

3. Background music

  • Background music is Teacher Li Guyi’s Unforgettable Tonight (Chinese New Year atmosphere), click on the upper right corner button to play the music

4. Global effects

  • The overall layout is still in the middle of the top is a lantern, below is the countdown to the Spring Festival, the bottom is two small tigers, click the button in the middle of the tiger can watch the fireworks.

5. Fireworks blessing

  • Click the view fireworks in advance at the bottom to jump to a new page, generating fireworks blessing
  • Wait until the Spring Festival that moment, will also jump to this page

Three, code explanation

html

<! DOCTYPEhtml>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="Width =device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible' content='ie=edge,chrome=1">
  <link rel="stylesheet" href="./css/index.css? Ver = 1.0">
  <link rel="icon" href="./img/fz.png">
  <title>: Bosom baby wish you good luck in 2022 🎁</title>
</head>

<body>
  <! -- Initial page -->
  <div class="index">
    <div class="lantern"></div>
    <div class="time">Distance from the Spring Festival:<span class="hour">--</span>: / / hour<span class="min">--</span>: / / minute<span class="second">--</span>/ / the number of seconds</div>
    <div class="text"></div>
    <div class="fence">
      <div class="p1"></div>
      <div class="p2">See fireworks in advance</div>
      <div class="p3"></div>
    </div>
  </div>
  <! -- Fireworks scene -->
  <div class="fire">
    <canvas></canvas>
  </div>
  <! -- Fireworks sound -->
  <div class="fireSound">
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
    <audio src="http://www.imooc.com/newyear/static/fire_sound.mp3" autoplay muted loop></audio>
  </div>
  <! -- Background music -->
  <div class="music run">
    <audio src="Music/Li Guyi - Unforgettable Tonight. Mp3" loop></audio>// Li Guyi's song</div>
  <script src="./js/index.js? Ver = 1.0"></script>
</body>
</html>
Copy the code

JS countdown

let timer1 = setInterval(() = > {
    let nowTime = new Date(),// Get the current time
      future = new Date("2022/02/01 00:00"),// Set a better time than the Spring Festival
      / / time
      times = future - nowTime,
      / / minutes
      h = Math.floor(times / (3600 * 1000)),// Calculate the difference in hours
      m = (Math.floor(times % (3600 * 1000)/(60 * 1000)) + ' ').padStart(2.0),// Count the minutes
      s = (Math.floor(times % (60 * 1000) / 1000) + "").padStart(2.0);// Count the seconds
    hour.innerText = h
    min.innerText = m
    second.innerText = s

    if (s == "00" && h == "00" && m == "00") {// If the current time is the same as the Spring Festival, trigger the firework effect
      page1.style.display = "none"
      page2.style.display = "block"
      clearInterval(timer1)
      // Initial fireworks screen
      initFire()
    }
  }, 1000)
Copy the code

JS fireworks

function initFire() {
    // Sound of explosion
    for (let i = 0; i < fireAudio.length; i++) {
      fireAudio[i].currentTime = i
    }
    // Get the width and height
    let width = window.innerWidth,
      height = window.innerHeight
    // Set width and height
    canvas.width = width
    canvas.height = height
    // Move the ball
    let balls = [],
      timer2 = null,
      count = 0,
      ballAll = 5.// The number of greetings
      textAll = 5.//
      textPos = [
        { x: width / 4.y: height / 4 + 30 },
        { x: width / 4 * 3.y: height / 4 - 30 },
        { x: width / 2.y: height / 2 },
        { x: width / 4.y: height / 4 * 3 },
        { x: width / 4 * 3.y: height / 4 * 3 + 50},].// Explode the array
      fires = [],
      // Image particle count group
      points1 = getImgInfo(imgArr[0].4),
      points2 = [],
      textFires = []
    for (let i = 1; i < imgArr.length; i++) {
      points2.push(getImgInfo(imgArr[i], 2))}Copy the code

Css styles

.index .fence .p1{// Special effects for the tiger on the leftposition: absolute;
  left: 0px;
  bottom: 0;
  z-index: 5;
  width: 280px;
  height: 300px;
  background: url(../img/kouzuo.png) bottom no-repeat;
  background-size: 100%;
  transform-origin: center bottom;
  animation: 2s ease-in-out -1s infinite turn;
}
.index .fence .p3{// Special effects for the tiger on the rightposition: absolute;
  right: -60px;
  bottom: -70px;
  z-index: 10;
  width: 280px;
  height: 300px;
  background: url(../img/kouyou.png) no-repeat;
  background-size: 100%;
  transform-origin: center bottom;
  animation: 2s ease-in-out infinite turn;
}
Copy the code

Fourth, making Pages

Github Pages provides a domain name for each account and can generate an executable site for projects you submit to the repository. I’ll explain how to use it later.

The above Spring Festival code is just a simple list of some, if you want to experience directly click on the link generated by Github Pages: Spring Festival, or rely on their own Github Pages to upload the project file, to make a unique web page.

After clicking the link, it will jump to the interface of the above renderings. There may be a bit of lag for domestic visits, so wait for a while.

Five, the appendix

This code is a reference to Github’s New Year page: The Year of the Ox

I changed to the Year of the Tiger: The Year of the Tiger: The Year of the Tiger, we want to directly download the source code on Github above the different two years of the Hechun page experience can be.

Before the bells ring, before the firecrackers ring, before the Spring Festival, before the year of the tiger begins, before people get drunk. First send my best wishes to your mobile phone, I wish you good luck in the year of the Tiger, family happiness.