Skip to content

Commit ab9d94b

Browse files
Debdeep1Debdeep1
committed
3D carousel 2 added
1 parent cc9405c commit ab9d94b

11 files changed

+242
-0
lines changed

‎Carousels/3D Carousel_02/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## 3D Carousel_2
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
<img src="./images/ezgif.com-gif-maker.gif">

‎Carousels/3D Carousel_02/images/818JxxUzo4L.jpg

265 KB
Loading

‎Carousels/3D Carousel_02/images/basketball-LeBron-James-Cleveland-Cavaliers-2018.jpg

283 KB
Loading

‎Carousels/3D Carousel_02/images/dcovnovcover_traehzlogo.jpg

225 KB
Loading

‎Carousels/3D Carousel_02/images/doncic_luka1280-1-1040x572.jpg

60 KB
Loading

‎Carousels/3D Carousel_02/images/download.jpg

8.19 KB
Loading

‎Carousels/3D Carousel_02/images/ezgif.com-gif-maker.gif

3.98 MB
Loading

‎Carousels/3D Carousel_02/images/images.jpg

8.78 KB
Loading

‎Carousels/3D Carousel_02/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>3D carousel</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<div id="drag-container">
12+
<div id="spin-container">
13+
<img src="./images/dcovnovcover_traehzlogo.jpg" alt="">
14+
<img src="./images/doncic_luka1280-1-1040x572.jpg" alt="">
15+
<img src="./images/download.jpg" alt="">
16+
<img src="./images/images.jpg" alt="">
17+
<img src="./images/basketball-LeBron-James-Cleveland-Cavaliers-2018.jpg" alt="">
18+
<img src="./images/818JxxUzo4L.jpg" alt="">
19+
</div>
20+
<div id="ground"></div>
21+
</div>
22+
<script src="index.js"></script>
23+
</body>
24+
</html>

‎Carousels/3D Carousel_02/index.js

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
var radius = 240;
2+
var autoRotate = true;
3+
var rotateSpeed = -60;
4+
var imgWidth = 120;
5+
var imgHeight = 170;
6+
7+
var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a';
8+
var bgMusicControls = true;
9+
10+
11+
setTimeout(init, 1000);
12+
var odrag = document.getElementById('drag-container');
13+
var ospin = document.getElementById('spin-container');
14+
var aImg = ospin.getElementsByTagName('img');
15+
var aVid = ospin.getElementsByTagName('video');
16+
var aEle = [...aImg, ...aVid];
17+
18+
ospin.style.width = imgWidth + "px";
19+
ospin.style.height = imgHeight + "px";
20+
21+
var ground = document.getElementById('ground');
22+
ground.style.width = radius * 3 + "px";
23+
ground.style.height = radius * 3 + "px";
24+
function init(delayTime) {
25+
for (var i = 0; i < aEle.length; i++) {
26+
aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
27+
aEle[i].style.transition = "transform 1s";
28+
aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
29+
}
30+
}
31+
function applyTranform(obj) {
32+
33+
if(tY > 180) tY = 180;
34+
if(tY < 0) tY = 0;
35+
36+
obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
37+
}
38+
function playSpin(yes) {
39+
ospin.style.animationPlayState = (yes?'running':'paused');
40+
}
41+
var sX, sY, nX, nY, desX = 0,
42+
desY = 0,
43+
tX = 0,
44+
tY = 10;
45+
46+
if (autoRotate) {
47+
var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
48+
ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
49+
}
50+
51+
if (bgMusicURL) {
52+
document.getElementById('music-container').innerHTML += `
53+
<audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>
54+
<p>If you are reading this, it is because your browser does not support the audio element.</p>
55+
</audio>
56+
`;
57+
}
58+
59+
document.onpointerdown = function (e) {
60+
clearInterval(odrag.timer);
61+
e = e || window.event;
62+
var sX = e.clientX,
63+
sY = e.clientY;
64+
this.onpointermove = function (e) {
65+
e = e || window.event;
66+
var nX = e.clientX,
67+
nY = e.clientY;
68+
desX = nX - sX;
69+
desY = nY - sY;
70+
tX += desX * 0.1;
71+
tY += desY * 0.1;
72+
applyTranform(odrag);
73+
sX = nX;
74+
sY = nY;
75+
};
76+
this.onpointerup = function (e) {
77+
odrag.timer = setInterval(function () {
78+
desX *= 0.95;
79+
desY *= 0.95;
80+
tX += desX * 0.1;
81+
tY += desY * 0.1;
82+
applyTranform(odrag);
83+
playSpin(false);
84+
if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
85+
clearInterval(odrag.timer);
86+
playSpin(true);
87+
}
88+
}, 17);
89+
this.onpointermove = this.onpointerup = null;
90+
};
91+
return false;
92+
};
93+
document.onmousewheel = function(e) {
94+
e = e || window.event;
95+
var d = e.wheelDelta / 20 || -e.detail;
96+
radius += d;
97+
init(1);
98+
};

‎Carousels/3D Carousel_02/styles.css

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
html,
6+
body {
7+
height: 100%;
8+
/* for touch screen */
9+
touch-action: none;
10+
}
11+
body {
12+
overflow: hidden;
13+
display: -webkit-box;
14+
display: -ms-flexbox;
15+
display: flex;
16+
background: #111;
17+
-webkit-perspective: 1000px;
18+
perspective: 1000px;
19+
-webkit-transform-style: preserve-3d;
20+
transform-style: preserve-3d;
21+
}
22+
#drag-container, #spin-container {
23+
position: relative;
24+
display: -webkit-box;
25+
display: -ms-flexbox;
26+
display: flex;
27+
margin: auto;
28+
-webkit-transform-style: preserve-3d;
29+
transform-style: preserve-3d;
30+
-webkit-transform: rotateX(-10deg);
31+
transform: rotateX(-10deg);
32+
}
33+
#drag-container img, #drag-container video {
34+
-webkit-transform-style: preserve-3d;
35+
transform-style: preserve-3d;
36+
position: absolute;
37+
left: 0;
38+
top: 0;
39+
width: 100%;
40+
height: 100%;
41+
line-height: 200px;
42+
font-size: 50px;
43+
text-align: center;
44+
-webkit-box-shadow: 0 0 8px #fff;
45+
box-shadow: 0 0 8px #fff;
46+
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
47+
}
48+
#drag-container img:hover, #drag-container video:hover {
49+
-webkit-box-shadow: 0 0 15px #fffd;
50+
box-shadow: 0 0 15px #fffd;
51+
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
52+
}
53+
#drag-container p {
54+
font-family: Serif;
55+
position: absolute;
56+
top: 100%;
57+
left: 50%;
58+
-webkit-transform: translate(-50%,-50%) rotateX(90deg);
59+
transform: translate(-50%,-50%) rotateX(90deg);
60+
color: #fff;
61+
}
62+
#ground {
63+
width: 900px;
64+
height: 900px;
65+
position: absolute;
66+
top: 100%;
67+
left: 50%;
68+
-webkit-transform: translate(-50%,-50%) rotateX(90deg);
69+
transform: translate(-50%,-50%) rotateX(90deg);
70+
background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
71+
}
72+
#music-container {
73+
position: absolute;
74+
top: 0;
75+
left: 0;
76+
}
77+
@-webkit-keyframes spin {
78+
from{
79+
-webkit-transform: rotateY(0deg);
80+
transform: rotateY(0deg);
81+
} to{
82+
-webkit-transform: rotateY(360deg);
83+
transform: rotateY(360deg);
84+
}
85+
}
86+
@keyframes spin {
87+
from{
88+
-webkit-transform: rotateY(0deg);
89+
transform: rotateY(0deg);
90+
} to{
91+
-webkit-transform: rotateY(360deg);
92+
transform: rotateY(360deg);
93+
}
94+
}
95+
@-webkit-keyframes spinRevert {
96+
from{
97+
-webkit-transform: rotateY(360deg);
98+
transform: rotateY(360deg);
99+
} to{
100+
-webkit-transform: rotateY(0deg);
101+
transform: rotateY(0deg);
102+
}
103+
}
104+
@keyframes spinRevert {
105+
from{
106+
-webkit-transform: rotateY(360deg);
107+
transform: rotateY(360deg);
108+
} to{
109+
-webkit-transform: rotateY(0deg);
110+
transform: rotateY(0deg);
111+
}
112+
}

0 commit comments

Comments
 (0)