一個簡單炫酷的前端小專案（html+css+js）----3D圖片演示

前言

對於學前端的小夥伴來說，吸引你們入坑的大都是一些炫酷的頁面。但往往那些頁面的原始碼對初學的夥伴們都不太友好。今天給大家分享一個程式碼簡單、適合初學者、高階感炫酷感爆棚的特效頁面（有npy的快樂加倍！)。

一、頁面特效效果展示

注：上述效果圖只是部分效果，原諒我還沒有學會自制gif圖！

二、功能描述

1、開啟頁面，所有圖片會自動轉動

2、圖片的大小和間隔可隨滑鼠滾輪滾動而改變

3、滑鼠按住頁面任意位置，拖動游標，頁面可隨之旋轉

三、功能實現

1.建立一個父容器，將所有照片疊放在一起

程式碼如下（html）：

 <div id="darg-container" class="darg">

      <!-- 父容器，相當於把所有圖片都放在一起 -->

    <div id="spin-container">

      <img src="1.jpg" alt="">

      <img src="2.jpg" alt="">

      <img src="3.jpg" alt="">

      <img src="4.jpg" alt="">

      <img src="5.jpg" alt="">

      <img src="6.jpg" alt="">

      <img src="8.jpg" alt="">

      

      

      <a target="_blank" href="7.jpg">

        <img src="7.jpg" alt="">

      </a>

  

      <!-- <video controls autoplay="autoplay" loop>

        <source src="8.jpg" type="video/mp4">

      </video> -->

      <p>3D Tiktok Carousel</p>

    </div>

    <div id="ground"></div>

  </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

2.給所有照片加上旋轉動畫

程式碼如下（js）：

function init(delayTime) {

  // 給所有的圖片加動畫

  for (var i = 0; i < aEle.length; i++) {

    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"

    aEle[i].style.transition = "transform 1s"

    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + 's'

  }

}

setTimeout(init, 1000)

1

2

3

4

5

6

7

8

9

3.監聽滑鼠事件

程式碼如下（js）：

// 滾輪滾動

// 監聽滑鼠滾輪事件，該函式不用呼叫直接生效

document.>

    // console.log(e)

    e = e || window.event

    var d  = e.wheelDelta / 10 || -e.detail

    radius += d

    init(1)

} 

var sX,sY,nX,nY,desX = 0 , desY = 0, tX = 0,tY = 0;

// 滑鼠拖動頁面

document.>

    // console.log(e);

    e = e || window.event//防止出錯,如果e不存在，則讓window.event為e

    var sX = e.clientX,

    sY = e.clientY

    //監聽滑鼠移動函式

    this.>

        console.log(e);

        e = e || window.event//防止出錯,如果e不存在，則讓window.event為e

        var nX = e.clientX,

            nY = e.clientY;

        desX = nX - sX;//在x軸上滑動的距離

        desY = nY - sY;

        tX += desX * 0.1

        tY += desY * 0.1

        // 讓頁面跟著滑鼠動起來

        applyTransform(oDarg)

    }

    this.>

        //每個多久實現一次setInterval

        oDarg.timer = setInterval(function(){

            desX *= 0.95

            desY *= 0.95

            tX += desX * 0.1

            tY += desY * 0.1

            applyTransform(oDarg)

            playSpin(false)

            if(Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5){

                clearInterval(oDarg.timer)

                playSpin(true)

            }

        },17) 

        this.= null 

    }

    return false

}

function applyTransform(obj){

    if(tY > 180)tY = 180

    if(tY < 0)tY = 0

    obj.style.transform = `rotateX(${-tY}deg) rotateY(${tX}deg)`

}

function playSpin(yes){

    oSpin.style.animationPlayState = (yes ? 'running' : 'paused')

}

總結