current position:Home>*520 Tanabata Valentine's day advertisement Web page code * - romantic dream 3D photo album (Cherry Blossom theme) HTML + CSS + JavaScript

*520 Tanabata Valentine's day advertisement Web page code * - romantic dream 3D photo album (Cherry Blossom theme) HTML + CSS + JavaScript

2021-08-22 22:46:41 @. code out the future

* 520 Tanabata Valentine's day advertising web page code *— Romantic dream 3D Photo album ( Cherry Blossom theme )HTML+CSS+JavaScript

520 Tanabata Festival advertisement , That is Chinese Valentine's Day , What else can you do besides sending flowers ?? Come and make high-end and high-grade D Three dimensional dynamic photo album confession web page !

Tanabata Festival is a very romantic festival , It is said that the Cowherd and the weaver girl will meet on the magpie bridge on July 7 of the lunar calendar every year , So Tanabata is the Valentine's day that has been handed down in China since ancient times , On this day, if you have someone you like , You might as well summon up the courage to confess .




* 3D Album effect demonstration

1.100 Paragraph confession source code demonstration address

1. PC( Computer terminal ) demonstration

 Insert picture description here

2. H5( Mobile terminal ) demonstration

 Insert picture description here

* Code directory

 Insert picture description here

* Two 、3D Photo album ( Code implementation )

1.html Background

    <!--  music  -->
    <audio controls autoplay>
      <source src="renxi.mp3">
  </audio>
  <!--  background  -->
  <div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;">
      <div id="background" class="wall"></div>
      <div id="midground" class="wall"></div>
      <div id="foreground" class="wall"></div>
      <div id="top" class="wall"></div>
  </div>
 <!--  Photo album  -->
    <div id="jsi-cherry-container" class="container">
      <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>

2.css Album drawing

@charset "utf-8";
* {
    
  margin: 0;
  padding: 0;
}
body {
    
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
}
li {
    
  list-style: none;
}
.box {
    
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  left: 42%;
  top: 45%;
  transform: translate(-50%,-50%);
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(13deg);
  -webkit-animation: move 5s linear infinite;
}
.minbox {
    
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50px;
  top: 30px;
  -webkit-transform-style: preserve-3d;
}
.minbox li {
    
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
}
.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);
}

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


* 6、 ... and 、 front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) 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



* 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 ↓ official account Get more source code !

 Insert picture description here


* 8、 ... 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 Tanabata Valentine's Day code gave a gift to his girlfriend ~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. One line of code teaches you how to advertise on Tanabata Valentine's Day — Comic 3D Photo album ( music + written words )HTML+CSS+JavaScript

32.HTML+CSS+JavaScript Make Tanabata confession web page ( Including music + Custom text )

33. Birthday present for Xuemei ~ Make a super romantic advertisement 3D Photo album (HTML+CSS+JavaScript)

34.HTML+CSS+JavaScript Making romantic balloons 520 Advertising album

35.《520 Tanabata Valentine's Day confession gift 》: Unreal romantic love story ——520 Show that the starry sky is long 3D Photo album (HTML+CSS+JavaScript)

36.HTML5 Tanabata Valentine's Day confession to send flowers web page production (HTML+CSS+JavaScript)

37.《520 Tanabata Valentine's day 》: Make our love album web page (HTML+CSS+JavaScript)

38. Younger martial sister, call directly “ That's too much “ 520 Tanabata Valentine's Day confession web page production (HTML+CSS+JavaScript)

39. Tanabata Valentine's Day is coming , use HTML+CSS Draw a color code photo album for your girlfriend !

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

Random recommended