정보섹션을 카드 형태로 보여주고, 좌우로 넘기며 탐색할 수 있는 인터랙티브한 캐러셀 UI 예제입니다.
Flexbox와 CSS Transform을 활용해 가로로 스크롤 가능한 카드 캐러셀을 구현하며, 각 카드는 이미지와 정보를 담고 있습니다. 사용자는 마우스 드래그나 스크롤로 부드럽게 카드를 넘길 수 있고, CSS Transition과 3D Transform 효과로 카드에 입체적인 움직임과 깊이감을 더해 시각적으로 매력적인 인터랙션을 제공합니다. 카드 각각은 이미지, 제목, 설명 텍스트로 구성되어 정보 전달과 디자인 모두를 만족시키며, 순수 CSS와 약간의 JavaScript로 제작되어 웹에서 가볍고 매끄럽게 작동합니다. 이 예제는 포트폴리오나 정보성 웹사이트에 활용하기 좋으며, Flexbox의 레이아웃 능력과 CSS 애니메이션 기법을 배우기에 유용한 자료입니다..
HTML 구조
<div class="slider">
<div class="item">
<h1>Space Fact 1</h1>
Jupiter protects Earth - its gravity acts like a cosmic shield, deflecting comets and asteroids.🌠
</div>
<div class="item">
<h1>Space Fact 2</h1>
Stars "beat" like hearts - they pulsate, expanding and contracting as they burn fuel.⭐
</div>
<div class="item">
<h1>Space Fact 3</h1>
Galaxies can "eat" each other - the Milky Way is currently consuming the Sagittarius Dwarf Galaxy.🌌
</div>
<div class="item ">
<h1>Space Fact 4</h1>
Space smells like seared steak - astronauts describe a metallic/grilled odor after spacewalks.👩🚀
</div>
<div class="item ">
<h1>Space Fact 5</h1>
Astronauts grow taller in space - spines stretch up to 2 inches without gravity's compression.🚀
</div>
<div class="item ">
<h1>Space Fact 6</h1>
Space has its own "internet" - neutron stars beam signals like cosmic radio towers.🪐
</div>
<div class="item ">
<h1>Space Fact 7</h1>
There's an alcohol cloud in space - in Aquila, containing enough ethanol for 400 septillion drinks.🍷
</div>
<div class="item ">
<h1>Space Fact 8</h1>
Your body contains stardust - atoms of heavy elements like calcium were forged in supernovae.✨
</div>
<div class="item ">
<h1>Space Fact 9</h1>
Black holes can "sing" - they create sound waves when consuming matter, but humans can't hear them.🎤
</div>
<button id="next">></button>
<button id="prev"><</button>
</div>
CSS 소스
body {
background-image: url(https://i.postimg.cc/Gtcs55SP/photo-1506318137071-a8e063b4bec0.avif);
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
}
.slider {
position: relative;
margin-top: 100px;
width: 100%;
height: 370px;
overflow: hidden;
}
.item {
position: absolute;
width: 200px;
height: 320px;
text-align: justify;
background-color: #fff;
border-radius: 10px;
padding: 20px;
transition: 0.5s;
left: calc(50% - 110px);
top: 0;
}
#next {
position: absolute;
right: 50px;
top: 40%;
}
#prev {
position: absolute;
left: 50px;
top: 40%;
}
#prev,
#next {
color: #fff;
background: none;
border: none;
font-size: xxx-large;
font-family: monospace;
font-weight: bold;
opacity: 0.5;
transition: opacity 0.5s;
}
#prev:hover,
#next:hover {
opacity: 1;
}
JS 소스
let items = document.querySelectorAll(".slider .item");
let active = 3;
function loadShow() {
items[active].style.transform = `none`;
items[active].style.zIndex = 1;
items[active].style.filter = "none";
items[active].style.opacity = 1;
// show after
let stt = 0;
for (var i = active + 1; i < items.length; i++) {
stt++;
items[i].style.transform = `translateX(${120 * stt}px) scale(${
1 - 0.2 * stt
}) perspective(16px) rotateY(-1deg)`;
items[i].style.zIndex = -stt;
items[i].style.filter = "blur(5px)";
items[i].style.opacity = stt > 2 ? 0 : 0.6;
}
stt = 0;
for (var i = active - 1; i >= 0; i--) {
stt++;
items[i].style.transform = `translateX(${-120 * stt}px) scale(${
1 - 0.2 * stt
}) perspective(16px) rotateY(1deg)`;
items[i].style.zIndex = -stt;
items[i].style.filter = "blur(5px)";
items[i].style.opacity = stt > 2 ? 0 : 0.6;
}
}
loadShow();
let next = document.getElementById("next");
let prev = document.getElementById("prev");
next.onclick = function () {
active = active + 1 < items.length ? active + 1 : active;
loadShow();
};
prev.onclick = function () {
active = active - 1 >= 0 ? active - 1 : active;
loadShow();
};
