I don't know much about the front end, so I simply modify the online code and complete the deployment.

Particle animation: https://github.com/kennethcachia/shape-shifter

Fireworks: There are many related codes on the Internet, but the original author has not been found

Effect: http://8.130.106.21/HappyBirthday/HappyBirthday.html

code:

1) Baidu Netdisk

        Link: https://pan.baidu.com/s/1-pC9d_s4ldD6y5Y3KZCkQg
        Extraction code: 6666

2) CSDN free download

        https://download.csdn.net/download/kb16045125/86951979

1. HTML page creation

1. Change the title

Replace the title in HappyBirthday/HappyBirthday.html with the corresponding person's name

<head>
    <meta charset="utf-8">
    <title>XXX生日快乐</title>

    <style>
        html,body{
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
            background:linear-gradient(to left top,blue, #ffc0cb);
        }
    </style>
    <link href="favicon.ico" rel="shortcut icon">
</head>

2. Particle name

Names of blessings shown in particles are replaced

Modify HappyBirthday/js/index.js#44 line

if (i !== -1) {
  S.UI.simulate(decodeURI(action).substring(i + 3));
} else {
  S.UI.simulate('|#countdown 3||祝|XXX|生日快乐|祝你|生日快乐|祝你幸福|祝你健康|前途光明|祝你|生日快乐！|#icon heart|#icon heart-empty|#icon heart');
}

3. Particle color

Modify the color of the particle animation display, pink is used in the video (255, 192, 203)

HappyBirthday/js/index.js#417 line modification

S.Dot = function (x, y) {
  this.p = new S.Point({
    x: x,
    y: y,
    z: 5,
    a: 1,
    h: 0
  });

  this.e = 0.07;
  this.s = true;

  this.c = new S.Color(255, 192, 203, this.p.a);

  this.t = this.clone();
  this.q = [];
};

4. Compatible equipment

In the original code, there is only a relatively good display effect on the computer browser, and the text display effect on the mobile browser is not good and the delay is insufficient, but it cannot be displayed normally. The particle distance and delay time are mainly adjusted.

Particle spacing : first set the default spacing to 8 (better display on mobile phones), then judge whether the screen is larger than the general size of mobile phones, and adjust it to a larger value of 13 (better display on tablets and computers).

The smaller the particle distance, the larger the number, and the slower the loading.

HappyBirthday/js/index.js#525 line modified

  if ((window.innerWidth>500 && window.innerHeight>500)){
    gap = 13;
  }

Delay time : When the number of particles increases and the loading is slow, it will be displayed according to the time set by the original author. It may be necessary to display the next word before the last word is displayed, resulting in a mess.

HappyBirthday/js/index.js#119 modified line

HappyBirthday/js/index.js#177 line modified

  // 118行
  var delay1,delay2;
  delay1 = 3000;
  delay2 = 5000;


  // 177行
  if (window.innerWidth>500 && window.innerHeight>500){
    delay1 = 1000;
    delay2 = 2000;
   }

5. Music playback

Because on some devices, the music cannot be played automatically, it needs to be triggered by clicking, add a click on the love heart, and start playing.

2. Alibaba Cloud Deployment

By deploying on Alibaba Cloud, it can be accessed through the URL.

I rented an Alibaba Cloud, which can be accessed by simply deploying static pages.

(If there is a brother who needs it urgently, you can also ask me to help deploy it, haha

1. Open port 80

Find your own instance, click the complete group, and configure to open a port 80

Open port 80

2. Install httpd

yum -y install httpd

3. Start httpd

service httpd start
service httpd status

After starting, you can see the following screen

4. Move httpd.conf

By default, the web pages under var/www/html will be published

cp /etc/httpd/conf/httpd.conf /var/www/html

5. Upload resources to var/www/html

# 解压压缩包
unzip HappyBirthday.zip
# 删除压缩包
rm -rf HappyBirthday.zip

6. Restart hhtpd

 service httpd restart

7. Address access

http://8.130.106.21/HappyBirthday/HappyBirthday.html

HTML happy birthday - birthday wishes (fireworks + particle animation)