一个简单炫酷的前端小项目(html+css+js)----3D图片演示

Posted m0_54850604

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单炫酷的前端小项目(html+css+js)----3D图片演示相关的知识,希望对你有一定的参考价值。

一个简单炫酷的特效页面(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>

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)

3.监听鼠标事件

代码如下(js):

// 滚轮滚动
// 监听鼠标滚轮事件,该函数不用调用直接生效
document.onmousewheel = function(e)
    // 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.onpointerdown = function(e)
    // console.log(e);
    e = e || window.event//防止出错,如果e不存在,则让window.event为e
    var sX = e.clientX,
    sY = e.clientY
    //监听鼠标移动函数
    this.onpointermove = function(e)
        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.onpointerup = function(e)
        //每个多久实现一次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.onpointermove = this.onpointerup = null 
    
    return false

function applyTransform(obj)
    if(tY > 180)tY = 180
    if(tY < 0)tY = 0
    obj.style.transform = `rotateX($-tYdeg) rotateY($tXdeg)`


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


总结

以上就是今天要跟大家分享的主要内容,本文仅简单介绍了该特效页面的功能以及实现,并附上部分代码供小伙伴们学习,代码并不是很成熟,也希望得到大牛们的指点。

(注:需要全部源码的小伙伴们可以评论留言哦!!)

以上是关于一个简单炫酷的前端小项目(html+css+js)----3D图片演示的主要内容,如果未能解决你的问题,请参考以下文章

简单又炫酷的two.js 二维动画教程

分享炫酷的前端页面滑动验证

百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

分享炫酷的前端页面随机二维码验证

前端工程化模块化组件化见解

canvas - 炫酷的3D星空