웹 프로젝트를 진행하면서 가로로 예쁘게 진행되는 캐러셀을 만들어봤습니다.
캐러셀(Carousel)이란 웹 페이지나 모바일 앱에서 여러 항목을 순환시켜 보여주는 슬라이더(slider) 형태의 인터페이스 요소입니다. 일반적으로 이미지, 비디오, 텍스트 등을 포함하는 항목들이 수평 또는 수직으로 연속적으로 흐르며 사용자는 이전 또는 다음 항목으로 이동할 수 있는 컨트롤을 통해 내용을 탐색할 수 있습니다.
캐러셀은 사용자에게 다음과 같은 장점을 제공합니다:
공간 효율성: 캐러셀은 제한된 공간 안에서 다수의 콘텐츠를 표시할 수 있어 공간을 효율적으로 사용할 수 있게 해줍니다.
사용자 참여: 시각적인 움직임과 인터랙티브한 요소가 사용자의 관심을 끌고, 참여를 유도할 수 있습니다.
콘텐츠 노출: 새로운 또는 중요한 콘텐츠를 효과적으로 노출시켜 사용자의 관심을 유도할 수 있습니다.
이 캐러셀은 HYBE 소속 아티스트들의 유튜브 콘텐츠를 수평 스크롤 형식으로 통합하여 제공함으로써 사용자들이 영상을 더욱 효과적으로 탐색하고 감상할 수 있는 인터랙티브한 경험을 제공합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "Work Sans", sans-serif;
font-weight: 400;
height: 100vh;
}
.wrapper {
background: linear-gradient(60deg, #fefcff, #ffffff);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.carousel {
position: relative;
width: 100%;
max-width: 500px;
display: flex;
justify-content: center;
flex-direction: row;
}
.slide {
display: flex;
align-items: center;
position: absolute;
width: 100%;
padding: 0 12px;
opacity: 0;
filter: drop-shadow(0 2px 2px #555);
will-change: transform, opacity;
animation: carousel-animate-horizontal 27s linear infinite;
}
.slide:nth-child(1) {
-webkit-animation-delay: calc(3s * -1);
animation-delay: calc(3s * -1);
}
.slide:nth-child(2) {
-webkit-animation-delay: calc(3s * 0);
animation-delay: calc(3s * 0);
}
.slide:nth-child(3) {
-webkit-animation-delay: calc(3s * 1);
animation-delay: calc(3s * 1);
}
.slide:nth-child(4) {
-webkit-animation-delay: calc(3s * 2);
animation-delay: calc(3s * 2);
}
.slide:nth-child(5) {
-webkit-animation-delay: calc(3s * 3);
animation-delay: calc(3s * 3);
}
.slide:nth-child(6) {
-webkit-animation-delay: calc(3s * 4);
animation-delay: calc(3s * 4);
}
.slide:nth-child(7) {
-webkit-animation-delay: calc(3s * 5);
animation-delay: calc(3s * 5);
}
.slide:nth-child(8) {
-webkit-animation-delay: calc(3s * 6);
animation-delay: calc(3s * 6);
}
.slide:last-child {
-webkit-animation-delay: calc(-3s * 2);
animation-delay: calc(-3s * 2);
}
.title {
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
}
.slide iframe {
width: 100%; /* 또는 원하는 너비 */
height: 300px; /* 또는 원하는 높이 */
}
@-webkit-keyframes carousel-animate-horizontal {
0% {
transform: translateX(100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
3%, 11.1111111111% {
transform: translateX(100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
14.1111111111%, 22.2222222222% {
transform: translateX(0) scale(1);
opacity: 1;
visibility: visible;
}
25.2222222222%, 33.3333333333% {
transform: translateX(-100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
36.3333333333% {
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: visible;
}
100% {
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
}
@keyframes carousel-animate-vertical {
0% {
transform: translateX(100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
3%, 11.1111111111% {
transform: translateX(100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
14.1111111111%, 22.2222222222% {
transform: translateX(0) scale(1);
opacity: 1;
visibility: visible;
}
25.2222222222%, 33.3333333333% {
transform: translateX(-100%) scale(0.7);
opacity: 0.4;
visibility: visible;
}
36.3333333333% {
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: visible;
}
100% {
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
}
</style>
<body>
<br>
<div class='wrapper'>
<div class='carousel'>
<div class='slide'>
<iframe src="https://www.youtube.com/embed/jUNz-uTF--E" frameborder="0" allowfullscreen></iframe>
</div>
<div class='slide'>
<iframe src="https://www.youtube.com/embed/MBdVXkSdhwU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slide">
<iframe src="https://www.youtube.com/embed/e81ad5MpfQ0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slide">
<iframe src="https://www.youtube.com/embed/8FpaiZrVoho" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slide">
<iframe src="https://www.youtube.com/embed/Km71Rr9K-Bw" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slide">
<iframe src="https://www.youtube.com/embed/qFE4Wp3lfW0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slide">
<iframe src="https://www.youtube.com/embed/p_XdZdg9oGc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slide">
<iframe src="https://www.youtube.com/embed/ArmDp-zijuc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="slide">
<iframe src="https://www.youtube.com/embed/yp26FJduCFc" frameborder="0" allowfullscreen></iframe>
</div>
<!-- 나머지 슬라이드들도 같은 패턴으로 추가 -->
</div>
</div>
</body>
</html>
이 코드 캐러셀을 활용하면 쇼핑몰 사이트에서 상품들을 진열해서 소비자들에게 보여 줄 수도 있습니다.
또는 모델 에이전시 사이트에서 모델 사진을 인터렉티브하게 보여 줄 수도 있겠습니다.
도움이 되셨다면 좋아요 구독 눌러주세용~
앞으로도 코딩 카테고리에 유용한 코드 만들어서 공유해 드리겠습니다.
반응형
'코딩' 카테고리의 다른 글
| 복리 계산기, 복리로 계산했을 때 수익, 복리 수익 (0) | 2024.02.08 |
|---|---|
| dart 전자공시된 회사 크롤링 하기, 기업 재무제표 크롤링하기, 기업 재무제표 자동으로 가져오기 (0) | 2024.01.10 |
| 로또 번호 추첨기, 로또 번호 생성기, 로또 번호 추천, ai 로또 (0) | 2023.12.14 |
| 재미있는 별명 생성기 웃긴 직업 추천기 닉네임 생성기 별명 추천 이름 생성기 aka 생성기 (0) | 2023.12.13 |
| 파이썬 파일 exe 로 만들기 py 파일 실행 파일로 만들기 (0) | 2023.12.01 |