current position:Home>One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript

One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript

2021-08-22 22:52:38 @. code out the future

One line of code teaches you how to advertise on Tanabata Valentine's Day — Comic 3D Photo album ( music + written words )HTML+CSS+JavaScript

Tanabata is China's Valentine's Day , The seventh evening of the seventh moon 520 Valentine's Day It is also a very suitable day for confession , You can put what you are usually afraid to say , On this day, say it to the people you like . Tomorrow is 2021 The Tanabata Festival in , Hurry up ! Do you want to surprise your girlfriend or your sister ! Today, this blog will share how to implement the front-end code comic 3D Three dimensional dynamic album . I quickly learned , Let's make the romance that belongs to our programmers !



3D Album effect demonstration ( Compatible PC Computer terminal /H5 Mobile terminal )

1. Cherry rain confesses 3D Photo album – Demo address
2. Opening remarks romantic cherry blossoms fall — Demo address

* 1.PC( Computer terminal ) demonstration

Comic 3D Photo album — Online demo address
 Insert picture description here

* 2.H5( Mobile terminal ) demonstration

 Insert picture description here

One 、 File structure

 Insert picture description here

Two 、3D Album advertising ( course )

Example : find index.html Under the document , Just modify the text
 Insert picture description here

* HTML Photo album

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title> Valentine's day on Chinese Valentine's day -  Comic 3D Album advertising </title>
        <!--  player css -->
        <link rel="stylesheet" href="./css/common.css" />
        <!--  Photo album css -->
        <link type="text/css" href="./css/style.css" rel="stylesheet" />
</head>
<body>
    <!--  The fireworks  -->
    <canvas class="raining"></canvas>
    <!--  typing  -->
    <div class="typing">
    <!--  subtitle  -->
    <h2 class="header-sub-title" id="word"></h2>
    <h2 class="header-sub-title blink">|</h2>
    </div>
    <!--  Photo album  -->
    <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>
     <!--  player  -->
    <div id="app">
        <div class="container_player">
          <div class="music-box">
            <!--  Player photos  -->
            <img src="img/01.png" />
            <div class="mask">
              <div class="mplayer" onclick="play()">
                <i class="fa">
                  <span class="before"></span>
                  <span class="after"> </span>
                </i>
                <svg class="loadingSvg" width="25" height="25" viewBox="0,0,50,50" style="  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  " >
                  <circle></circle>
                </svg>
              </div>
              <div class="m-circle m-progress">
                <svg width="163" height="163" viewBox="0,0,163,163">
                  <circle cx="81" cy="81" r="159" stroke-width="8" stroke="rgba(255, 206, 113, 0.2)" fill="rgba(0,0,0,.2)" ></circle>
                  <circle class="a" cx="81" cy="81" r="159" stroke-width="6" stroke="rgba(255, 206, 113, 1)" fill="none" stroke-dasharray="0 999" transform="matrix(0,-1,1,0,0,163)" ></circle>
                </svg>
              </div>
              <div class="m_time">
                <span class="mplayer_curtime">00:00</span>
                <span class="m-join">/</span>
                <span class="mplayer_durtime">00:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  music  -->
      <audio id="myAudio" src="./azn.mp3" loop="loop" ></audio>
    <div class="backimg"></div>
</body>
<html>

* JS Text printing

   // ----------- Print word -----------
     const words = [
      " dear , Today is our first day together 520 God ",
      "*  The moon and plum stars are sparse, and cicadas are moaning , Who plays Hu Qin and Qu you ",
      "*  No one is blowing tonight , When the imperial examination is due to ",
      "*  Your smile , I can't forget ",
      "*  Your good , Warm my heart ",
      "*  Your beauty , Like the autumn moon ",
      "*  my love , Like autumn water ",
      "*  Accompany you until you are old ",
      "*  dear , Tanabata is coming ",
      "*  Accompany you through every Tanabata in your life ",
    ];
    let i = 0;
    let timer;
    let deleteDelay = 3000;
    /*  Start writing text  */
    function typingEffect() {
    
      let word = words[i].split("");
      var loopTyping = function () {
    
        if (word.length > 0) {
    
          document.getElementById("word").innerHTML += word.shift();
        } else {
    
          delay(function () {
    
            deletingEffect();
          }, deleteDelay); 
          return false;
        }
        timer = setTimeout(loopTyping, typeSpeed);
      };
    }

    function deletingEffect() {
    
      let word = words[i].split("");
      var loopDeleting = function () {
    
        if (word.length > 0) {
    
          word.pop();
          document.getElementById("word").innerHTML = word.join("");
        } else {
    
          if (words.length > i + 1) {
    
            i++;
          }
          else {
    
            i = 0;
          }
          typingEffect();
          return false;
        }

    var delay = (function () {
    
      var timer = 0;
      return function (callback, ms) {
    
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    })();
    /*  Start printing  */
    typingEffect();

* JS Fireworks bubbles </ font >

/*  The fireworks  */
    var canvas = document.querySelector(".raining");
    var w, h;
    ~~ function setSize() {
     // Definition canvas The width and height of , Make it the same width and height as the browser window 
        window.onresize = arguments.callee;
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }();
        move: function() {
     // The focus is on judgment and initial position . Nothing else has changed 
            if (this.y > this.h) {
     // Position determination 
                this.y += -this.vy; // From bottom to top  

            } else {
    
                if (this.r < 100) {
     // The size of the bloom 
                    this.r += this.vr;
                } else {
    
                    this.init(); // After playing, return to the origin of the variable 
                }

            }
            this.draw(); // Start painting 

        }
    }

    function createrain(num) {
    
        for (var i = 0; i < num; i++) {
    
            setTimeout(function() {
    
                var raing = new rain(); // Create a drop of rain 
                raing.init();
                raing.draw();
                arain.push(raing);
            }, 800 * i) // every other 150ms A drop of rain 
        }
    }
    createrain(10); // Rain amount 
    setInterval(function() {
    
        canCon.fillStyle = "rgba(0,0,0,0.1)"; // Pick up a transparent 0.13 My pen  
        canCon.fillRect(0, 0, w, h); // Add mask   Control the raindrop length 
        for (var item of arain) {
    
            //item of arain It refers to every element in the array 
            //item in arain It refers to the subscript of each element in the array ( Including traversable elements on circular links )
            item.move(); // Run the entire move event 
        }
    }, 1000 / 60); // Rise time 
  

3、 ... and 、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. Search the song

 Insert picture description here

* 2. Download songs

 Insert picture description here

* 3. Get songs

 Insert picture description here

* 4. Save the song

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 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )

web 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 ~ send 1000 set HTML+CSS+JavaScript Template website
 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 ↓ Male Z Number Get more source code !

 Insert picture description here


7、 ... and 、 More confession source code

1.100 paragraph html+css+JavaScript Declare the source code demonstration address

2.520 A birthday present for your girlfriend on Valentine's Day ~html+css+js Realize the cool cherry blossom of shaking sound 3D Photo album ( Including music )

3. One line of code teaches you to catch your sister easily ~html+css+js Fireworks advertisement 3D Photo album ( Including music + Customizable text )

4. 520 Valentine's Day present for her ~html+css+javascript Flying snow 3D Photo album ( Including music )

5. 520 Watch the meteor shower with her on Valentine's Day ~html+css+javascript Making meteor shower 3D Photo album ( Including music )

6. html+css+js Happy birthday website template (520/ Valentine's day on Chinese Valentine's day / A confession / To marry him / Happy birthday, ) With background music

7. html+css+js Happy birthday, ~ Happy birthday for programmers html Templates ( Including birthday background music )

8. Girlfriend's birthday HTML+css3+js Realize the cool cherry blossom of shaking sound 3D Photo album ( With background music ) A programmer must declare himself

9. How do I use a line of code to express my sister 520 For your girlfriend on Valentine's day 3D Cherry rain photo album gift ( Programmer confession exclusive )

10. Valentine's day on Chinese Valentine's day ~html+css+javascript Realize the full screen love effect ( Programmer's confession )

11. Tanabata Valentine's Day flower advertising animation (HTML+CSS+JavaScript)

12. html+css+js Make a wedding countdown web page template (520/ Valentine's day on Chinese Valentine's day / Programmer advertisement )

13. html+css+javascript Make love confession code (520/ Valentine's day on Chinese Valentine's day / A confession / a birthday present )

14. Stunning html+css+javascript Phantasm 3D Photo album ( With background music ) A programmer must declare himself _520_ Valentine's day on Chinese Valentine's day

15. html+css+javascript Realization 100 Super cool advertising source code (520/ The seventh evening of the seventh moon / A confession / To marry him / Take off a single ) Programmers must

16. html+css+javascript Realization 520 Advertising love tree ( Including music ) A programmer must declare himself

17. html+css+javaScript Achieve cool fireworks confession ( Cloud particle text 3D start )

18. The programmer 520 A confession Html+Js+Css Petal album web page template programmer must express

19. html+css+javascript Realize the heaven and earth Bagua feng shui compass clock ( Free with source code )

20. html+css+javascript To achieve the tiktok clock ( Free with source code )

21. Tiktok JavaScript Realize the network red astronaut dial ~ Look at how programmers use code to make Huawei space watches

22. html+css+js Draw snow in winter 3D Photo album (520 Valentine's Day / Valentine's day on Chinese Valentine's day / Programmer's confession html Code )

23. Make a romantic and warm birthday gift for her ~html+css+javascript Blue dream ocean 3D Photo album ( Including music )

24. html+css+js Make 520 Express the web page , Full screen love and white language web page animation code , romantic 520 Love expression animation special effects .

25. 520 Valentine's Day programmer's romantic confession ~html+css+js Romantic starry love 3D Photo album ( Including music )

26. Html5 Romantic wedding invitation wedding website template _ Love her and give her the most beautiful H5 Wedding invitation _( Wedding electronic invitation ) With background music

27. html+css+javascript Full screen snowflake love 520 Confession website ( Including music )520 A confession / Valentine's day on Chinese Valentine's day / a birthday present / A programmer must declare himself

28. 520 On Tanabata Valentine's day, I gave my girlfriend a gift with code ~html+css+javascript Realize Cherry Blossom love album 「 You can take it to the person you like 」

29. Tanabata Valentine's day teaches you how to confess ~html+css+js Making beautiful stars 3D Photo album ( Including music ) The programmer 520 Confession essential

30. html+css+javascript Happy birthday fireworks 520/ Confession / Valentine's day on Chinese Valentine's day / Proposal only ( Custom text )

31. be based on Echarts Realize large screen display of visual data (150 set )—— Make a dark blue technology object flow cloud data Kanban page template

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

Random recommended