Comment: This article mainly introduces the origami effect of the html5 menu, similar to the user's instructions when installing the Cheetah browser. Friends who need it can refer to it
Similar to the user's instructions when installing Cheetah Browser.
Effect after click<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fold paper effect by gt-Ke Leyi</title>
<style>
#wrapper {
-webkit-perspective: 55cm;
-webkit-perspective-origin: 50% 50%;
text-align: center;
}
.paper {
position: relative;
height: 40px;
width: 5em;
margin: 0;
background-color: aqua;
-webkit-transition: -webkit-transform 1s linear;
}
</style>
<script type="text/javascript">
window.angel = 0;
window.timer;
function folder() {
var foldUp = document.getElementById("foldUp");
var foldDown = document.getElementById("foldDown");
var down = document.getElementById("down");
if (window.angel == 0) {
window.timer = setInterval(function() {
var diff = different(-1, 20);
console.log(foldUp.offsetTop)
move(foldUp, diff, 1);
move(foldDown, diff, 3);
move(down, diff, 4);
}, 40);
setTimeout(function() {
clearInterval(window.timer);
foldUp.style.top = "-20px";
foldDown.style.top = "-60px";
down.style.top = "-80px";
window.angel = -90;
}, 1030);
foldUp.style.webkitTransform = "rotateX(-90deg)";
foldDown.style.webkitTransform = "rotateX(90deg)";
} else if (angel == -90) {
window.timer = setInterval(function() {
var diff = different(1, 20);
console.log(foldUp.offsetTop)
move(foldUp, diff, 1);
move(foldDown, diff, 3);
move(down, diff, 4);
}, 40);
setTimeout(function() {
clearInterval(window.timer);
foldUp.style.top = "0";
foldDown.style.top = "0";
down.style.top = "0";
window.angel = 0;
}, 1030);
foldUp.style.webkitTransform = "rotateX(0deg)";
foldDown.style.webkitTransform = "rotateX(0deg)";
} else {
console.log(window.angel)
}
}
function positionValue(div, type) {// Get the value with unit of css
var str = div.style[type];
str = str.substring(0, str.length - 2);
var value = parseInt(str);
if (isNaN(value)) {
value = 0;
}
return value;
}
function move(div, different, time) {
var top = positionValue(div, "top");
div.style.top = top + different * time + "px";
}
function different(direction, height) {
var lastAngel = window.angel;
window.angel += 3.6 * direction;
var different = Math
.ceil((Math.cos(window.angel / 180 * Math.PI) - Math
.cos(lastAngel / 180 * Math.PI))
* height * 100) / 100;
return different;
}
</script>
</head>
<body>
<div>
<div>
g
</div>
<div>
n
</div>
<div>
b
</div>
<div>
t
</div>
</div>
<button onclick=fold();>
fold
</button>
</body>
</html>