An animation like light card

  • 2017-07-09
  • 106
  • 0
Talk is cheap, note is there , show you code.

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="utf-8" />
        <style media="screen">
            body{
                background-color: #000;
            }
            #wrap{
                position: relative;
                /*the img size and make it get center*/
                width: 130px;
                height: 200px;
                margin: 150px auto;
                transform-style: preserve-3d;
                /*perspective: 1000px;*/
        /*make the whole items of wrap rotate by the axis */
        /*perspective, which between 800 and 1000 seems better.*/
                transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);

            }
            #wrap>div{
                position: absolute;
        transition:1s;
            }
            #wrap img{
                /*delete the break between img*/
                vertical-align: middle;
                /*x-offset y-offset spread-offset color*/
                box-shadow: 0 0 10px #fff;
            }
      /*the inverted img was created*/
            #wrap div div{
                height: 200px;
                margin-top: 10px;
                /*reverse by y axis */
                transform: scale(1,-1);
                background: linear-gradient(rgb(0,0,0) 40%,rgba(0,0,0,0)),url(img/10.jpg);

            }

      #wrap span{
        display: block;
        width:1200px;
        height:1200px;
        position: absolute;
        /*center span*/
        left:50%;
        top:50%;
        margin-left:-600px;
        margin-top:-600px;

        background: radial-gradient(rgb(50,50,50), rgba(0,0,0,0) 70%);
        transform: translateY(110px) rotateX(90deg);

      }


        </style>
    <script >
      window.onload=function () {
        let wrap=document.getElementById("wrap");
        let divs=document.querySelectorAll("#wrap>div");
        let refs=document.querySelectorAll("#wrap div div");
        let rotate=360/divs.length;

        for(let i=0;i<divs.length;i++){
//          the inverted img
          refs[i].style.background='linear-gradient(rgb(0,0,0) 40%,rgba(0,0,0,0)),url(img/'+(i+1)+'.jpg)';
//          anonymous function and closure
          (function(i){
            setTimeout(function(){
//                After 2000, 1800, 1600 ... seconds to run transform(1s)
//                The first page was last runner
              divs[i].style.transform='rotateY('+i*rotate+'deg) translateZ(400px)';
            },(divs.length-i)*200);
          })(i);
        }

//      When the fist img was run at the end position
        divs[0].addEventListener('transitionend',function(){
          drag();
        });

        function drag(){
          let curX=0;           //init circle value
          let curY=-10;     //init circle value
          let timer;

          document.onmousedown=function(ev){
            clearInterval(timer);
            let startTime=new Date().getTime();     //when you mouse down
            let disX=ev.clientX;    //the start point
            let disY=ev.clientY;    //the start point

            /*
             * Last stop point
             * Every mouse down need set the lastXY
             */
            let lastX=curX;
            let lastY=curY;

            /*note the speed*/
            let speedX=0;
            let speedY=0;

            document.onmousemove=function(ev){
              curX=lastX+(ev.clientX-disX)/10;
              curY=lastY+(disY-ev.clientY)/10;

              wrap.style.transform='perspective(1000px) rotateX('+curY+'deg) rotateY('+curX+'deg)';

              //drag distance by the mouse move distance
              //so you need calc the
              speedX=(ev.clientX-disX)/100;
              speedY=(disY-ev.clientY)/100;
            };

            document.onmouseup=function(){
              document.onmousemove=null;
              let endTime=new Date().getTime();         //note the mouse up time

              if(endTime-startTime<300){
                timer=setInterval(function(){
                  curX+=speedX;
                  curY+=speedY;

                  //friction force
                  speedX*=0.95;
                  speedY*=0.95;

                  //stop condition
                  if(Math.abs(speedX)<0.1 && Math.abs(speedY)<0.1){
                    clearInterval(timer);
                  }

                  wrap.style.transform='perspective(1000px) rotateX('+curY+'deg) rotateY('+curX+'deg)';
                },16);
              }
            };

            return false;
          };
        }



      }
    </script>

    </head>
    <body>
        <div id="wrap">
            <div><img src="img/1.jpg" />
                <div>

                </div>
            </div>
            <div><img src="img/2.jpg" />
                <div >

                </div>
            </div>
            <div><img src="img/3.jpg" />
                <div >

                </div>
            </div>
            <div><img src="img/4.jpg" />
                <div>

                </div>
            </div>

            <div><img src="img/5.jpg" />
                <div>

                </div>
            </div>
            <div><img src="img/6.jpg" />
                <div>

                </div>
            </div>
            <div><img src="img/7.jpg" />
                <div>

                </div>
            </div>
            <div><img src="img/8.jpg" />
                <div>

                </div>
            </div>
            <div><img src="img/9.jpg" />
                <div>

                </div>
            </div>
            <div><img src="img/10.jpg" />
                <div>

                </div>
            </div>
      <span></span>
        </div>
    </body>

</html>

评论

还没有任何评论,你来说两句吧