current position：Home>520 Valentine's Day gift for girlfriend's birthday ~html+css+js to achieve tiktok cherry 3D album (Music)

520 Valentine's Day gift for girlfriend's birthday ~html+css+js to achieve tiktok cherry 3D album (Music)

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

* 520 For your girlfriend on Valentine's day 3D Album gift ~html+css+js Realize the cool cherry blossom of shaking sound 3D Photo album ( Including music )

annual /520 Valentine's Day / Valentine's day on Chinese Valentine's day / a birthday present / Confession younger martial sister / Programmer's confession , Do you want to surprise your girlfriend or your sister , Today's blog will share the front-end code html+css+javascript How to achieve 3D Three dimensional dynamic album . I quickly learned , Let's make the romance that belongs to our programmers ！

* List of articles

* Preface

520/ Tanabata Valentine's day [ Sakura Drops 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 !

* 3D Album Demo ( With background music ) Customizable 12 Photos

1. Cherry Blossom rain 3D Photo album - Demo address
2. Text prologue + Romantic cherry blossoms fall - Demo address
3. Firefly + Sakura Drops 3D Photo album - Demo 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 、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 ( The falling part of cherry blossoms )

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

css (3D Album section )

.box {
    
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  margin-left: 42%;
  margin-top: 22%;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(13deg);
  -webkit-animation: move 5s linear infinite;
}
.minbox li:nth-child(1) {
    
  background: url(../img/01.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {
    
  background: url(../img/02.png) no-repeat 0 0;
  -webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {
    
  background: url(../img/03.png) no-repeat 0 0;
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {
    
  background: url(../img/04.png) no-repeat 0 0;
  -webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {
    
  background: url(../img/05.png) no-repeat 0 0;
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {
    
  background: url(../img/06.png) no-repeat 0 0;
  -webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {
    
  background: url(../img/1.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {
    
  background: url(../img/2.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {
    
  background: url(../img/3.png) no-repeat 0 0;
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {
    
  background: url(../img/4.png) no-repeat 0 0;
  -webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {
    
  background: url(../img/5.png) no-repeat 0 0;
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {
    
  background: url(../img/6.png) no-repeat 0 0;
  -webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox {
    
  width: 800px;
  height: 400px;
  position: absolute;
  left: 0;
  top: -20px;
  -webkit-transform-style: preserve-3d;
}
.maxbox li {
    
  width: 200px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
  -webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {
    
  -webkit-transform: translateZ(100px);
}
.maxbox li:nth-child(2) {
    
  -webkit-transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {
    
  -webkit-transform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {
    
  -webkit-transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {
    
  -webkit-transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {
    
  -webkit-transform: rotateY(90deg) translateZ(100px);
}

Two 、3D Album clipping ( course )

The tutorial is as follows ： need 12 A picture ( Customizable 12 Zhang )

1-6 The picture is big 400px*400px ,01-06 The picture is a small picture 100px*100px

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 )

First : Download Meitu XiuXiu / Baidu download / Or software installation
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

3、 ... and 、 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 for songs you need

Insert picture description here

2. download
Insert picture description here

3 Get songs id
Insert picture description here

4 Pay attention to the official account. / Copy link to browser open

Insert picture description here

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

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

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 ↓ Male Z Number 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/20210822225444518V.html

The sidebar is recommended

guess what you like

Random recommended