这是一款js 3D旋转木马特效插件。该插件通过CSS3和纯js来完成,可在中以3D旋转的方式来展示一组图片。
使用方法
HTML结构
<div id="drag-container"> <div id="spin-container"> <img src="images/pexels-photo-206395.jpeg" alt=""> <img src="images/pexels-photo-1391498.jpeg" alt=""> <img src="images/pexels-photo-1382731.jpeg" alt=""> <img src="images/pexels-photo-1758144.jpeg" alt=""> <img src="images/pexels-photo-1382734.jpeg" alt=""> <img src="images/pexels-photo-1462636.jpeg" alt=""> <a target="_blank" href="images/pexels-photo-139829.jpeg"> <img src="images/pexels-photo-139829.jpeg" alt=""> </a> <video controls autoplay="autoplay" loop> <source src="" type="video/mp4"> </video> <p>3D Tiktok Carousel</p> </div> <div id="ground"></div> </div> <div id="music-container"></div>
CSS样式
* { margin: 0; padding: 0; } html, body { height: 100%; } body { overflow: hidden; display: flex; background: #111; perspective: 1000px; transform-style: preserve-3d; } #drag-container, #spin-container { position: relative; display: flex; margin: auto; transform-style: preserve-3d; transform: rotateX(-10deg); } #drag-container img, #drag-container video { transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 200px; font-size: 50px; text-align: center; box-shadow: 0 0 8px #fff; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005); } #drag-container img:hover, #drag-container video:hover { box-shadow: 0 0 15px #fffd; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007); } #drag-container p { font-family: Serif; position: absolute; top: 100%; left: 50%; transform: translate(-50%,-50%) rotateX(90deg); color: #fff; } #ground { width: 900px; height: 900px; position: absolute; top: 100%; left: 50%; transform: translate(-50%,-50%) rotateX(90deg); background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent); } #music-container { position: absolute; top: 0; left: 0; } #carousel-container { width: 100%; height: 100%; } @keyframes spin { from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } @keyframes spinRevert { from{ transform: rotateY(360deg); } to{ transform: rotateY(0deg); } }
JavaScript
var radius = 240; var autoRotate = true; var rotateSpeed = -60; var imgWidth = 120; var imgHeight = 170; var bgMusicURL = ''; var bgMusicControls = true; // ===================== start ======================= setTimeout(init, 100); var obox = document.getElementById('drag-container'); var ospin = document.getElementById('spin-container'); var aImg = ospin.getElementsByTagName('img'); var aVid = ospin.getElementsByTagName('video'); var aEle = [...aImg, ...aVid]; ospin.style.width = imgWidth + "px"; ospin.style.height = imgHeight + "px"; var ground = document.getElementById('ground'); ground.style.width = radius * 3 + "px"; ground.style.height = radius * 3 + "px"; 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"; } } function applyTranform(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'); } var sX, sY, nX, nY, desX = 0, desY = 0, tX = 0, tY = 10; if (autoRotate) { var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert'); ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`; } if (bgMusicURL) { document.getElementById('music-container').innerHTML += ` <audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop> <p>If you are reading this, it is because your browser does not support the audio element.</p> </audio> `; } if (mobilecheck()) { // ==================== Touch Events ==================== document.ontouchstart = function(e) { clearInterval(obox.timer); e = e || window.event; var sX = e.touches[0].clientX, sY = e.touches[0].clientY; this.ontouchmove = function(e) { e = e || window.event; var nX = e.touches[0].clientX, nY = e.touches[0].clientY; desX = nX - sX; desY = nY - sY; tX += desX * 0.1; tY += desY * 0.1; applyTranform(obox); sX = nX; sY = nY; } this.ontouchend = function(e) { this.ontouchmove = this.ontouchend = null; obox.timer = setInterval(function() { desX *= 0.95; desY *= 0.95; tX += desX * 0.1; tY += desY * 0.1; applyTranform(obox); playSpin(false); if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { clearInterval(obox.timer); playSpin(true); } }, 17); } // return false; } } else { // ==================== Mouse Events ==================== document.onmousedown = function(e) { clearInterval(obox.timer); e = e || window.event; var sX = e.clientX, sY = e.clientY; this.onmousemove = function(e) { e = e || window.event; var nX = e.clientX, nY = e.clientY; desX = nX - sX; desY = nY - sY; tX += desX * 0.1; tY += desY * 0.1; applyTranform(obox); sX = nX; sY = nY; } this.onmouseup = function(e) { this.onmousemove = this.onmouseup = null; obox.timer = setInterval(function() { desX *= 0.95; desY *= 0.95; tX += desX * 0.1; tY += desY * 0.1; applyTranform(obox); playSpin(false); if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { clearInterval(obox.timer); playSpin(true); } }, 13); } return false; } document.onmousewheel = function(e) { e = e || window.event; var d = e.wheelDelta / 20 || -e.detail; radius += d; init(1); }; }
该js 3D旋转木马特效插件的codepen网址为:https://codepen.io/hoanghien0410/pen/MMPaqm
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!