html5 menu origami effect_html5 tutorial skills-H5 Tutorial-php.cn

html5 menu origami effect_html5 tutorial skills

PHP中文网

Release： 2016-05-16 15:47:58

Original

1706 people have browsed it

Similar to the user instructions when installing Cheetah Browser.

The effect after clicking

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>fold paper effect by gt-柯乐义</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 fold() {
  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(p, type) {// 得到css带单位的值
  var str = p.style[type];
  str = str.substring(0, str.length - 2);
  var value = parseInt(str);
  if (isNaN(value)) {
   value = 0;
  }
  return value;
 }
 function move(p, different, time) {
  var top = positionValue(p, "top");
  p.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>
  <p id="wrapper">
   <p id="up" class="paper">
    g
   </p>
   <p id="foldUp" class="paper">
    n
   </p>
   <p id="foldDown" class="paper">
    b
   </p>
   <p id="down" class="paper">
    t
   </p>
  </p>
  <button onclick=fold();>
   fold
  </button>
 </body>
</html>

Copy after login