current position:Home>A line of code teaches you to catch your sister easily. HTML + CSS + JS fireworks advertising 3D photo album (including music + customizable text) 520 confession / Tanabata Valentine's Day / proposal

A line of code teaches you to catch your sister easily. HTML + CSS + JS fireworks advertising 3D photo album (including music + customizable text) 520 confession / Tanabata Valentine's Day / proposal

2021-08-22 22:54:45 @. code out the future

How did I get my sister's heart ~html+css+js Achieve full screen fireworks 3D Photo album ( Including music + Custom text )

annual 520 Valentine's Day / Valentine's day on Chinese Valentine's day / Girlfriend's birthday / Programmer's confession / giving gifts /3D Photo album , Do you want to surprise your girlfriend or your sister , Today, this blog will share how to implement the front-end code 3D Three dimensional dynamic album . I quickly learned , Let's make the romance that belongs to our programmers !



* Preface

520/ Tanabata Valentine's day [ Full screen of fireworks 3D Photo album ], Programmers can also be romantic ! The programmer expresses his special code to his sister !
HTML+css3+js Tiktok is very loud 3d Rotating album - Including music ,( Give it to your girlfriend , Confession , Birthday ) Dynamic generation effect , It's made in this way ~, Now? , More and more people like to record their life with video , Friends with more photos will also choose to make dynamic album videos , Not only is it creative , At the same time, you can show yourself , It's a magic tool for teasing girls !


* More advertising demos

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

1. Single photo presentation ( Compatible H5 Mobile phones and PC The computer )

 Insert picture description here

2. Multi photo Demo ( Compatible H5 Mobile phones and PC The computer )

 Insert picture description here

* Code file directory

 Insert picture description here

One 、 Text modification ( Code implementation )

Example : find index.html In the document script Under the label words Field , Just change the text ~
 Insert picture description here

Two 、3D Photo album ( Code implementation )

html ( Subtitles )

    <!--  typing  -->
    <div class="typing">
      <!--  subtitle  -->
      <h2 class="header-sub-title" id="word"></h2>
      <h2 class="header-sub-title blink">|</h2>
    </div>

html (3D Photo album )

    <!--  Photo album  S -->
    <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>
    <!--  Photo album  E -->

html ( Text printing )

    <!--  typing  -->
    <div class="typing">
      <!--  subtitle  -->
      <h2 class="header-sub-title" id="word"></h2>
      <h2 class="header-sub-title blink">|</h2>
    </div>

html ( player )

    <!--  player  -->
    <div id="app">
      <div class="container_player">
        <div class="music-box">
          <!--  Music Pictures  -->
          <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="music/yinyue.mp3"></audio>

js( Text printing )

/*  Just change the text here  */
    <script>
      //  Print word 
      const words = [
        "2021.5.20 I love you  1314 God ~",
        "* Your smile , It's the most beautiful scenery I've ever seen in my life .",
        "* I want to collect such scenery all my life .",
        "* My life is wild , Never stay for anyone ,",
        "* But since I met you , I will guard you for the rest of my life .",
        "* I don't want to be an episode in your life ,",
        "* I want to be the theme song of your life .",
        " I love you! .",
      ];

      let i = 0;
      let timer;
      //  Speed 
      let deleteDelay = 3000;
      let typeSpeed = 100;
      let delSpeed = 50;
      /*  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(); // do stuff
            }, deleteDelay); // end delay
            // deletingEffect();
            return false;
          }
          timer = setTimeout(loopTyping, typeSpeed);
        };
        loopTyping();
      }
      /*  Start writing text  */
      typingEffect();
    </script>

js ( The fireworks effect is realized )

 var audio = document.getElementById("myAudio");
var currentTime = $(".mplayer_curtime");
var durationTime = $(".mplayer_durtime");
var circle = $(".m-circle .a")[0];
var circumference = 2 * Math.PI * 160;
var timer_audio;

function play() {
    
  if (audio.paused) {
    
    audio.play();
    $(".music-box").addClass("mplaying");
    timer_audio = setInterval(() => {
    
      if (audio.ended) {
    
        $(".music-box").removeClass("mplaying");
        currentTime.text("00:00");
        circle.setAttribute("stroke-dasharray", "0 999");
      } else {
    
        currentTime.text(formatTime(audio.currentTime));
        durationTime.text(formatTime(audio.duration));
        var step = circumference / audio.duration;
        var timeDisplay = Math.floor(audio.currentTime);
        circle.setAttribute(
          "stroke-dasharray",
          "" + timeDisplay * step + " " + circumference
        );
      }
    }, 100);
  } else {
    
    audio.pause();
    $(".music-box").removeClass("mplaying");
  }
}

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.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 、 Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( It can be used permanently and free of charge )

1. You don't need to buy a server to deploy online , Your connection is accessible all over the world , Here is a necessary artifact for programmers ~
Plugins are integrated with super easy-to-use plug-ins , Download and install for free , Simple and easy to understand , It's an artifact ~ If necessary, it can be found in the article ↓ Xiagong Z Number acquisition

2. Is to do your code effect well , Deploy online , Send links to others , You can let the other party click in through your connection , You can see the effect of your web page , Both computer and mobile terminals are OK ! ( Otherwise, people will send files when they see your web page , The experience is not very good ~)

1.1 Deployment process

 Insert picture description here

1.2 wow ~ Deployment success

wow ~ Deployment success ! Deploy your written page online , People all over the world can access your web page through links ( Free forever )~
 Insert picture description here


6、 ... 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


7、 ... 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


8、 ... 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/20210822225442907x.html

Random recommended