🌊 author’s home page: Hai Yong🌊 Author profile: πŸ†CSDN full stack quality creator, πŸ₯‡HDZ core group member 🌊 Fan benefits: Send 6~9 books to the award record every week, send various small gifts from time to time

Video and online presentation

Demo video address: www.bilibili.com/video/BV1rS…

πŸ’• romantic envelope: Haiyong. Site /eluvletter πŸ’Œ3D cherry blossoms flying all over the sky: Haiyong. Site/Yinghua 🌊 public number [haiyong] reply [cherry blossoms] obtain complete source code!

πŸ’• Romantic envelope

HTML content

<div id="jsi-cherry-container"></div> 
<section class="container" id="contact" >
        <form class="flip">
                <div class="front">
    <h2>ToΒ Β Ming</h2>
                        <a id="flip2back" href="#">Flip</a>
                </div>
                <div id="content" class="back">
                        <div id="letter">
                                <div class="container">
                                        <div class="flip">                        
                        <div class="front"></div>
                                                <div class="back">
                        <p class="letter"></p> 
                        <a id="close" href="#">Close</a>								
                                                </div>                            
                                        </div>
                                </div>
                        </div>
                        <div id="top">
                                <a id="flip" href="#contact">Flip</a>
                        </div>
                        <div id="lid" class="container">
                                <div class="flip">  
                                        <div class="front">
                                                <a id="open" href="#content"><span></span></a>
                                        </div>                        
                                        <div class="back"></div>
                                </div>
                        </div>
                </div>
        </form>
</section>

<div id="footer">
        <audio id="music2" preload="auto" loop></audio>
        <a id="music_btn2" href="javascript:playPause();"></a>
</div>
Copy the code

Part of the CSS

#letter {
  background: #fafafa;
  width: 90%;
  height: 95%;
  position: absolute;
  left: 5%;
  top: 5%;
  z-index: 0;
  -webkit-transition:.5s .5s;
  -moz-transition:.5s .5s;
  -o-transition: 0s 0s;
  transition: 0s 0s; }

#content:target #letter {
  top: -40%;
  -o-transition:.5s .5s;
  transition:.5s .5s; }

#letter .container {
  position: absolute;
  width: 100%;
  /*height: 50%; * /
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  top: 0;
  left: 0;
  -webkit-transition: 0s 0s;
  -moz-transition: 0s 0s;
  transition: 0s 0s;
  z-index: 1; }

#letter .flip {
  width: 100%;
  height: 100%; }
  #letter .flip {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
    -webkit-transition: -webkit-transform 0.5 s 0s;
    -moz-transition: -moz-transform 0.5 s 0s;
	transition: -moz-transform 0.5 s 0s;
	
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
	transform-origin: left top; }
  #letter .flip > .front.#letter .flip > .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
	backface-visibility: hidden; }
  #letter .flip > .back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
	transform: rotateX(180deg); }
  #content:target #letter .flip {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
	transform: rotateX(180deg);
	
    -webkit-transition-duration: 0.5 s;
    -moz-transition-duration: 0.5 s;
	transition-duration: 0.5 s;
	
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
	transition-delay: 1s; }
Copy the code

letter.js

var aparted = false;
$("#open").click(function(){
	if(! aparted) {var typed = new Typed('.letter', {
			strings: ["^1000DearΒ  Β  Ming"."M^200ing



Β  Β  Β  Β  Β  Β  Β  Night に は ^ 300 い ぀ γ‚‚ ^ 200 cold い γ‚ˆ ね, ^ 600 で γ‚‚, 600 hand γ‚’ ^ ^ 200 ηΉ‹ い で い γ‚‹ と, 600 warm か ^ ^ 200 く γͺ γ‚‹ γ‚ˆ! 

              Kodomo shows partial beauty and sterilization. Two people 1906 and isco tetra ば, ^600 deuteri insolation no! 



^1000H^200ao
"].typeSpeed: 100.backSpeed: 50
		});	
		$('#open').find("span").eq(0).css('background-position'."0 -150px");
		aparted = true;
		var music = document.getElementById('music2');		
		if (music.paused)
		{
			music.play();
			$('#music_btn2').css("opacity"."1"); }}});function playPause() {
    var music = document.getElementById('music2');
    var music_btn = $('#music_btn2');
    if (music.paused){
        music.play();
	music_btn.css("opacity"."1"); 
    }
    else{
        music.pause();
	music_btn.css("opacity"."0.2"); }}window.onload = function () {	
	var currentUrl = window.location.href;
	var firstIndex = currentUrl.indexOf("#");	
	if (firstIndex <= 0) window.location.href = currentUrl + "#contact";
	$('#music2').attr('src', bgmsrc);
	document.addEventListener('touchstart'.function (event) { if(event.touches.length > 1) event.preventDefault(); });
	var lastTouchEnd = 0;
	document.addEventListener('touchend'.function (event) {
		var now = (new Date()).getTime();
		if(now - lastTouchEnd <= 300) event.preventDefault();
		lastTouchEnd = now;
	}, false);
	document.addEventListener('gesturestart'.function (event) { event.preventDefault(); });
	$('body').css('opacity'.'1');
	$('#jsi-cherry-container').css('z-index'.'99');
}
Copy the code

Demo pictures

πŸ’• Romantic Envelope online demo address: haiyong.site/eluvletter

πŸ’Œ 3D cherry blossoms fly all over the sky

HTML content

<canvas id="sakura"></canvas>
<div class="btnbg">
</div>
<footer class="page-footer">
<span>made by </span>
<a href="http://haiyong.site/moyu" target="_blank">
<img class="touxiang"  src="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" alt="George Martsoukos logo">
</a>
</footer>
Copy the code

CSS content

body {
    padding:0;
    margin:0;
    overflow:hidden;
	height: 600px;
}
canvas {
    padding:0;
    margin:0;
}
div.btnbg {
    position:fixed;
    left:0;
    top:0;
}
.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
  color: black;
  background: rgba(255.255.255.0.65);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}
.touxiang{
	width:24px;
	height:24px;
}
Copy the code

Part of JS content

<script id="sakura_point_vsh" type="x-shader/x_vertex">
uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start

attribute vec3 aPosition;
attribute vec3 aEuler;
attribute vec2 aMisc; //x:size, y:fade

varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;

//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;

varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;

void main(void) {
    // Projection is based on vertical angle
    vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
    gl_Position = uProjection * pos;
    gl_PointSize = aMisc.x * uProjection[1] [1] / -pos.z * uResolution.y * 0.5;
    
    pposition = pos.xyz;
    psize = aMisc.x;
    pdist = length(pos.xyz);
    palpha = smoothstep(0.0.1.0, (pdist - 0.1) / uFade.z);
    
    vec3 elrsn = sin(aEuler);
    vec3 elrcs = cos(aEuler);
    mat3 rotx = mat3(
        1.0.0.0.0.0.0.0, elrcs.x, elrsn.x,
        0.0, -elrsn.x, elrcs.x
    );
    mat3 roty = mat3(
        elrcs.y, 0.0, -elrsn.y,
        0.0.1.0.0.0,
        elrsn.y, 0.0, elrcs.y
    );
    mat3 rotz = mat3(
        elrcs.z, elrsn.z, 0.0, 
        -elrsn.z, elrcs.z, 0.0.0.0.0.0.1.0
    );
    mat3 rotmat = rotx * roty * rotz;
    normal = rotmat[2];
    
    mat3 trrotm = mat3(
        rotmat[0] [0], rotmat[1] [0], rotmat[2] [0],
        rotmat[0] [1], rotmat[1] [1], rotmat[2] [1],
        rotmat[0] [2], rotmat[1] [2], rotmat[2] [2]); normX = trrotm[0];
    normY = trrotm[1];
    normZ = trrotm[2];
    
    const vec3 lit = vec3(0.6917144638660746.0.6917144638660746, -0.20751433915982237);
    
    float tmpdfs = dot(lit, normal);
    if(tmpdfs < 0.0) {
        normal = -normal;
        tmpdfs = dot(lit, normal);
    }
    diffuse = 0.4 + tmpdfs;
    
    vec3 eyev = normalize(-pos.xyz);
    if(dot(eyev, normal) > 0.0) {
        vec3 hv = normalize(eyev + lit);
        specular = pow(max(dot(hv, normal), 0.0), 20.0);
    }
    else {
        specular = 0.0;
    }
    
    rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0.1.0);
    rstop = pow(rstop, 0.5);
    / / 0.69315 = ln (0.5)
    distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
}
</script>
Copy the code

Demo pictures

πŸ’Œ3D cherry blossoms fly all over the sky online demonstration address: Haiyong. site/yinghua

HTML5 3D cherry blossom flying and romantic envelope

If you are having trouble copying the above code, you can create the project as follows (3D cherry blossoms flying and romantic envelopes in JavaScript)

There are many beginners who can’t put all this code together. For them, I’ve put all the code together. Concern public number [sea] reply [sakura] to obtain the source code.

Hopefully with this tutorial you can also create 3D cherry blossoms flying and romantic envelopes using HTML5.

The author is determined to build a fishing site with 100 small games/tools, update progress: 50/100

I’ve been writing tech blogs for a long time, mostly through Nuggets, and this is my post on how to make to-do lists using JavaScript. I like to share technology and happiness through articles. You can visit my blog at juejin.cn/user/204034… For more information. Hope you like it! 😊

πŸ’Œ welcomes your comments and suggestions in the comments section! πŸ’Œ