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 ！
* List of articles
- One line of code teaches you how to advertise on Tanabata Valentine's Day — Comic 3D Photo album ( music + written words )HTML+CSS+JavaScript
- 3D Album effect demonstration ( Compatible PC Computer terminal /H5 Mobile terminal )
- One 、 File structure
- Two 、3D Album advertising ( course )
- 3、 ... and 、3D Album clipping ( course )
- Four 、 song mp3 Replace tutorial ( course )
- 5、 ... and 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )
- 6、 ... and 、 The source code for
- 7、 ... and 、 More confession source code
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
* 2.H5( Mobile terminal ) demonstration
One 、 File structure
Two 、3D Album advertising ( course )
Example ： find index.html Under the document , Just modify the text
* 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 !
* 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
* 2. Meitu Xiu Xiu ( Computer version ) Cut the picture
2.1 Select Picture clipping
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
* 2. Download songs
* 3. Get songs
* 4. Save the song
Pay attention to the official account. / Copy link to browser open
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 )
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
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 !
7、 ... and 、 More confession source code
1.100 paragraph html+css+JavaScript Declare the source code demonstration address
11. Tanabata Valentine's Day flower advertising animation (HTML+CSS+JavaScript)
17. html+css+javaScript Achieve cool fireworks confession ( Cloud particle text 3D start )
20. html+css+javascript To achieve the tiktok clock ( Free with source code )
copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225236381K.html
The sidebar is recommended
- JS JavaScript how to get the subscript of a value in the array
- BEM - a front-end CSS naming methodology
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Asynchronous solution async await
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- Front end Engineering - scaffold
- Array de duplication problem solution - Nan recognition problem
guess what you like
-
New choice for app development: building mobile applications using Vue native
-
Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
-
Front end, netty framework tutorial
-
The wireless charging of SAIC Roewe rx5 plus is so easy to use!
-
Left hand IRR, right hand NPV, master the password of getting rich
