current position：Home>Dr. Tsinghua was asked to write code on site and make a 3D photo album of love cherry blossoms (HTML + CSS + JavaScript) in 5 minutes

Dr. Tsinghua was asked to write code on site and make a 3D photo album of love cherry blossoms (HTML + CSS + JavaScript) in 5 minutes

2021-08-22 22:52:46 【@. code out the future】

* Dr. Qinghua was asked to write code on the spot ,5 Every minute makes a love 3D Photo album (HTML+CSS+JavaScript)「 You can take it to the person you like 」

Before confession , Our message area is open to you ！ Let's show you a different way to express yourself , And the one you love ta Let's make it clear ！

* Introduction to the kissing plot

6 month 20 Japan , Be asked to write code on site Rush to microblog and search , Some netizens call directly ： I have no ability to pick up relatives in the future , I'm afraid I won't succeed , Have to say , Talented boys are so handsome ！
Insert picture description here
Recently in Xi'an, Shaanxi , When a bridegroom picks up , The bride asked to write code on the spot . The bridegroom was sweating , Finally in the 5 Finish the test in minutes , Make a red love on the computer .
Insert picture description here
According to the bride , The first level of getting married is crossing the line of fire , The second level is the elk ferrule . The bride said , The hardest thing is for the groom to write a program , Because I don't understand , I find it difficult to test these two levels , But she thought , The groom is a doctor of computer science from Tsinghua University , I believe he can accomplish , I want to remind him not to forget the skill of eating
When I see the love made by the groom , The bride shouted “ Don't worry, don't worry ”！
Insert picture description here
Actually , This is not the first time that a programmer groom has been asked to write code during the wedding .
It is reported that , In the last year 3 month , A bridegroom in Xuzhou, Jiangsu, was picking up the wedding , Bridesmaids in order to liven up the atmosphere , Ask the groom to write code on the spot , Show your love to the bride .
The bridesmaid called everyone colleagues , I think that both newcomers are programmers , It is also temporary to ask the groom to express his love in this way .

* God comments from netizens

For this new way of getting married , Many netizens said that highly educated marriage write code , Much better than a vulgar marriage , One netizen said , In case you really can't write it , That would be embarrassing , Some netizens also praised the bride's wit ！
Net friend @ I feel sleepy at work ： It's much more interesting than a vulgar marriage
Net friend @ It's sweet today ： If the code can't be written, it's embarrassing , Is the wife not married
Net friend @ The movie bo： My wife is young and doesn't know how expensive hair is
Net friend @mymasterpiece： The bride also knows her groom's ability , It's good .
Net friend @ Little five's five -： This man is very real . The skill of eating should not be forgotten , This reminder is more profound .
There are also netizens making fun of 、 Ask for help 、 Share your experience ：
Net friend @ Love bean ugly picture reward ： I study civil engineering , When you get married, do you want to perform live and move bricks ？
Net friend @ Little tadpole hyacinth yiyi： Doctor of Physics , What problems can be solved ？ Ask for help
Net friend @ Kazan ： This marriage is …… I wonder how the meteorological professional scene should be adjusted ？
Net friend @ Muyi w： I study organic , Will there be a pillar at the scene
Net friend @ Cheng Orange 716： When I got married, my husband was asked to do an advanced math problem ,985 The doctor said he could see the answer in a second
Net friend @ Photographer Yan afai ： Last time I took a picture of an IELTS Listening Test on the spot ,2 Listen more quickly

* List of articles

* Not far behind - Make a love album and keep it for future marriage ~

* love 3D Album effect demonstration

1. Cherry Blossom rain 3D Album demo address
2. Text prologue + Romantic Cherry Blossom falling demonstration address

1. PC( Computer terminal ) demonstration

Insert picture description here

2. H5( Mobile terminal ) demonstration

Insert picture description here

* Code file directory

Insert picture description here

One 、* Text prologue modification ( Code implementation )

Example ： find js In the document script.js file , Just change the text
Insert picture description here

html ( The opening part )

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title> Text prologue +3D Cherry rain photo album </title>

    <style> body {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style>
  </head>
  <body>
    <script src="js/underscore-min.js"></script>
    <script src="./js/script.js"></script>
  </body>
</html>

js( The opening part )

/*  Just change the text here  */
let str = [" baby ", " Today is our love 520 God ", " Don't blink ~"];
let i = -1;
let time = setInterval(() => {
    
  if (i != str.length - 1) {
    
    i++;
    shape.print(str[i]);
  } else {
    
    //  Clear timer 
    clearTimeout(time);
    //  Jump to oriental page 
    window.location.href = "oriental.html";
    //  Reset to -1
    i = -1;
  }
}, 1500);

Two 、* Cherry Blossom rain 3D Photo album ( Code implementation )

html (3D Album section )

  <body>
   <!-- The music part  -->
    <audio autoplay="autopaly">
      <source src="renxi.mp3" type="audio/mp3" />
    </audio>
    <div id="jsi-cherry-container" class="container">
    <!-- 3D Photo album code part  -->
      <div class="box">
        <ul class="minbox">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <ol class="maxbox">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>
  </body>

js Sakura Drops 

   <script>
      var RENDERER = {
    
        INIT_CHERRY_BLOSSOM_COUNT: 30,
        MAX_ADDING_INTERVAL: 10,

        init: function() {
    
          this.setParameters();
          this.reconstructMethods();
          this.createCherries();
          this.render();
        setParameters: function() {
    
          this.$container = $('#jsi-cherry-container');
          this.width = this.$container.width();
          this.height = this.$container.height();
          this.context = $('<canvas />')
            .attr({
     width: this.width, height: this.height })
            .appendTo(this.$container)
            .get(0)
            .getContext('2d');
          this.cherries = [];
          this.maxAddingInterval = Math.round(
            (this.MAX_ADDING_INTERVAL * 1000) / this.width
          );
          this.addingInterval = this.maxAddingInterval;
        },
        reconstructMethods: function() {
    
          this.render = this.render.bind(this);
        },
      var CHERRY_BLOSSOM = function(renderer, isRandom) {
    
        this.renderer = renderer;
        this.init(isRandom);
      };
      CHERRY_BLOSSOM.prototype = {
    
        FOCUS_POSITION: 300,
        FAR_LIMIT: 600,
        MAX_RIPPLE_COUNT: 100,
        RIPPLE_RADIUS: 100,
        SURFACE_RATE: 0.5,
        SINK_OFFSET: 20,
        init: function(isRandom) {
    
          this.x = this.getRandomValue(
            -this.renderer.width,
            this.renderer.width
          );
          var axis = this.getAxis(),
            theta =
              this.theta +
              (Math.ceil(
                -(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy
              ) *
                Math.PI) /
                500;
          theta %= Math.PI * 2;

          this.offsetY =
            40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);
          this.thresholdY =
            this.renderer.height / 2 +
            this.renderer.height * this.SURFACE_RATE * axis.rate;
          this.entityColor.addColorStop(
            0,
            'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)'
          );
          this.entityColor.addColorStop(
            0.05,
            'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)'
          );
          this.entityColor.addColorStop(
            1,
            'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)'
          );
      $(function() {
    
        RENDERER.init();
      });
    </script>

3、 ... and 、* Cherry Blossom rain 3D Album clipping ( course )

The tutorial is as follows ： need 12 A picture , 1-6 The picture is big 400px400px ,01-06 The picture is a small picture 100px100px

Will be ready for the picture , Replace... By yourself img The picture in the file can be !
Insert picture description here

1. Photo cutting ( course )

1.1 First : Download Meitu XiuXiu / Baidu download / Or software installation
1.2 Or use online links to crop —> Online clip image links
Insert picture description here

2. Meitu Xiu Xiu ( Computer version ) Cut the picture

2.1 Select Picture clipping
Insert picture description here

Four 、* song mp3 Replace tutorial ( course )

If it needs to be replaced mp3 The background music , You can download and replace it by yourself ~ mp3 Free download address
1.1 Search for songs you need

Insert picture description here

1.2 download Insert picture description here
1.3 Get songs id
Insert picture description here
1.4 Pay attention to the official account. / Copy link to browser open

Insert picture description here

1.5 download mp3 ~ After downloading, replace it by yourself mp3 File can ( If you don't want to modify the code , The name must be consistent )
Insert picture description here

5、 ... and 、* front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~
Insert picture description here

6、 ... and 、* The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」！

* 3. We can learn from each other about the above technical issues , can Focus on ↓ official account Get more source code !

Insert picture description here

7、 ... and 、* More confession source code

100 Paragraph confession source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225244404a.html

The sidebar is recommended

guess what you like

Random recommended