비전공자 개발일기

3D Image Carousel 본문

Javascript

3D Image Carousel

HiroDaegu 2022. 10. 5. 00:47
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D IMG CAROUSEL</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div id="drag-container">  
    <div id="spin-container">  
     <!-- Add your images (or video) here -->  
     <img src="https://images.pexels.com/photos/206395/pexels-photo-206395.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">  
     <img src="https://images.pexels.com/photos/1391498/pexels-photo-1391498.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">  
     <img src="https://images.pexels.com/photos/1382731/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">  
     <img src="https://images.pexels.com/photos/1758144/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">  
     <img src="https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">  
     <img src="https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">  
    </div>  
    <div id="ground"></div>  
   </div>  
</body>
</html>
* {  
  margin: 0;  
  padding: 0;  
 }  
 html,  
 body {  
  height: 100%;  
  /* for touch screen */  
  touch-action: none;   
 }  
 body {  
  overflow: hidden;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  background: #111;  
  -webkit-perspective: 1000px;  
      perspective: 1000px;  
  -webkit-transform-style: preserve-3d;  
      transform-style: preserve-3d;  
 }  
 #drag-container, #spin-container {  
  position: relative;  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  margin: auto;  
  -webkit-transform-style: preserve-3d;  
      transform-style: preserve-3d;  
  -webkit-transform: rotateX(-10deg);  
      transform: rotateX(-10deg);  
 }  
 #drag-container img, #drag-container video {  
  -webkit-transform-style: preserve-3d;  
      transform-style: preserve-3d;  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  line-height: 200px;  
  font-size: 50px;  
  text-align: center;  
  -webkit-box-shadow: 0 0 8px #fff;  
      box-shadow: 0 0 8px #fff;  
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);  
 }  
 #drag-container img:hover, #drag-container video:hover {  
  -webkit-box-shadow: 0 0 15px #fffd;  
      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%;  
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);  
      transform: translate(-50%,-50%) rotateX(90deg);  
  color: #fff;  
 }  
 #ground {  
  width: 900px;  
  height: 900px;  
  position: absolute;  
  top: 100%;  
  left: 50%;  
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);  
      transform: translate(-50%,-50%) rotateX(90deg);  
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);  
 }  
 #music-container {  
  position: absolute;  
  top: 0;  
  left: 0;  
 }  
 @-webkit-keyframes spin {  
  from{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  } to{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  }  
 }  
 @keyframes spin {  
  from{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  } to{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  }  
 }  
 @-webkit-keyframes spinRevert {  
  from{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  } to{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  }  
 }  
 @keyframes spinRevert {  
  from{  
   -webkit-transform: rotateY(360deg);  
       transform: rotateY(360deg);  
  } to{  
   -webkit-transform: rotateY(0deg);  
       transform: rotateY(0deg);  
  }  
 }
 // Author: Hoang Tran (https://www.facebook.com/profile.php?id=100004848287494)  
 // Github verson (1 file .html): https://github.com/HoangTran0410/3DCarousel/blob/master/index.html  
 // You can change global variables here:  
 var radius = 240; // how big of the radius  
 var autoRotate = true; // auto rotate or not  
 var rotateSpeed = -60; // unit: seconds/360 degrees  
 var imgWidth = 120; // width of images (unit: px)  
 var imgHeight = 170; // height of images (unit: px)  
 // Link of background music - set 'null' if you dont want to play background music  
 var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a';  
 var bgMusicControls = true; // Show UI music control  
 /*  
    NOTE:  
     + imgWidth, imgHeight will work for video  
     + if imgWidth, imgHeight too small, play/pause button in <video> will be hidden  
     + Music link are taken from: https://hoangtran0410.github.io/Visualyze-design-your-own-/?theme=HauMaster&playlist=1&song=1&background=28  
     + Custom from code in tiktok video https://www.facebook.com/J2TEAM.ManhTuan/videos/1353367338135935/  
 */  
 // ===================== start =======================  
 // animation start after 1000 miliseconds  
 setTimeout(init, 1000);  
 var odrag = document.getElementById('drag-container');  
 var ospin = document.getElementById('spin-container');  
 var aImg = ospin.getElementsByTagName('img');  
 var aVid = ospin.getElementsByTagName('video');  
 var aEle = [...aImg, ...aVid]; // combine 2 arrays  
 // Size of images  
 ospin.style.width = imgWidth + "px";  
 ospin.style.height = imgHeight + "px";  
 // Size of ground - depend on radius  
 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) {  
  // Constrain the angle of camera (between 0 and 180)  
  if(tY > 180) tY = 180;  
  if(tY < 0) tY = 0;  
  // Apply the angle  
  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;  
 // auto spin  
 if (autoRotate) {  
  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');  
  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;  
 }  
 // add background music  
 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>  
 `;  
 }  
 // setup events  
 document.onpointerdown = function (e) {  
  clearInterval(odrag.timer);  
  e = e || window.event;  
  var sX = e.clientX,  
    sY = e.clientY;  
  this.onpointermove = 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(odrag);  
   sX = nX;  
   sY = nY;  
  };  
  this.onpointerup = function (e) {  
   odrag.timer = setInterval(function () {  
    desX *= 0.95;  
    desY *= 0.95;  
    tX += desX * 0.1;  
    tY += desY * 0.1;  
    applyTranform(odrag);  
    playSpin(false);  
    if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {  
     clearInterval(odrag.timer);  
     playSpin(true);  
    }  
   }, 17);  
   this.onpointermove = this.onpointerup = null;  
  };  
  return false;  
 };  
 document.onmousewheel = function(e) {  
  e = e || window.event;  
  var d = e.wheelDelta / 20 || -e.detail;  
  radius += d;  
  init(1);  
 };
728x90
LIST

'Javascript' 카테고리의 다른 글

Color Switch Animated Login Form  (0) 2022.10.07
OTP INPUT  (0) 2022.10.06
Toast MSG  (0) 2022.10.03
Dino Game  (0) 2022.09.29
Stopwatch  (0) 2022.09.27
'Javascript' Related Articles more