안녕하세요 TriplexLab 입니다.
오늘은 제가 slider를 응용해서 만든 slider custom에 관해서 살펴보도록 하겠습니다 :)
저도 이 슬라이스 애니메이션은 웹써칭을 하다가 우연히 발견한 애니메이션 입니다.
<div class="content">
<section class="about-slide">
<div class="about-slide-wrap">
<ul class="bg-slide">
<li class="slide-item" style="z-index: 12;">
<img src="./img/img_slide_01.jpg" alt="" />
</li>
<li class="slide-item" style="z-index: 11;">
<img src="./img/img_slide_02.jpg" alt="" />
</li>
<li class="slide-item" style="z-index: 10;">
<img src="./img/img_slide_03.jpg" alt="" />
</li>
</ul>
<ul class="icon-slide">
<li class="icon-item" style="z-index: 12;">
<img src="./img/img_slide_01.jpg" alt="" />
<p class="tit_inner">
<span class="tit">TriplexLab</span>
<img src="./img/logo.svg" alt="logo" />
</p>
</li>
<li class="icon-item" style="z-index: 11;">
<img src="./img/img_slide_02.jpg" alt="" />
<p class="tit_inner">
<span class="tit">Front Developer</span>
<img src="./img/logo.svg" alt="logo" />
</p>
</li>
<li class="icon-item" style="z-index: 10;">
<img src="./img/img_slide_03.jpg" alt="" />
<p class="tit_inner">
<span class="tit">Blog</span>
<img src="./img/logo.svg" alt="logo" />
</p>
</li>
</ul>
</div>
</section>
</div>
* {
margin: 0;
padding: 0;
list-style: none;
}
@keyframes slidein {
0% {
left: 45%;
opacity: 0;
}
100% {
left: 50%;
opacity: 1;
}
}
@keyframes slidein2 {
0% {
right: 45%;
opacity: 0;
}
100% {
right: 50%;
opacity: 1;
}
}
.content {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.about-slide {
position: relative;
overflow: hidden;
width: 100%;
height: 580px;
}
.about-slide .about-slide-wrap {
position: relative;
width: 100%;
}
.about-slide ul.bg-slide {
width: 100%;
height: 580px;
}
.about-slide ul.bg-slide li {
position: absolute;
width: 100%;
height: 580px;
}
.about-slide ul.bg-slide img {
height: 580px;
width: auto;
position: absolute;
left: 50%;
top: 0;
margin-left: -720px;
}
.about-slide .icon-slide {
position: absolute;
left: 50%;
top: 50%;
margin: -240px 0 0 -240px;
width: 480px;
height: 480px;
}
.about-slide .icon-slide li {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 480px;
height: 480px;
border-radius: 50%;
}
.about-slide .icon-slide li > img {
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
.about-slide .icon-slide li .tit_inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
}
.about-slide .icon-slide li .tit_inner .tit {
position: absolute;
left: 50%;
top: 50%;
font-size: 22px;
font-weight: 600;
transform: translate(-50%, 140px);
}
.about-slide .icon-slide li .tit_inner img {
width: 140px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.about-slide .bg-slide .slide-item {
opacity: 0;
}
.about-slide .bg-slide .slide-item.active {
opacity: 1;
}
.about-slide .bg-slide .slide-item.active > img {
animation: slidein 1.5s ease;
}
.about-slide .icon-slide .icon-item {
opacity: 0;
}
.about-slide .icon-slide .icon-item.active {
opacity: 1;
}
.about-slide .icon-slide .icon-item.active > img {
animation: slidein2 1s ease;
}
(function () {
const bg = document.querySelector(".bg-slide");
const icon_slide = document.querySelector(".icon-slide");
const items = Array.from(document.querySelectorAll(".slide-item"));
const icon_item = Array.from(document.querySelectorAll(".icon-item"));
let current;
let n = 0;
const add = function (el) {
el.classList.add("active");
current = el;
};
const remove = function (el) {
current && el.classList.remove("active");
};
const addHander = function () {
remove(items[n]);
remove(icon_item[n]);
n += 1;
if (items.length === n) n = 0;
add(items[n]);
add(icon_item[n]);
};
add(items[0]);
add(icon_item[0]);
setInterval(addHander, 2500);
})();
2.5초마 마다 자동으로 마크업에 있는 li 태그의 항목에 active 클래스를 추가 합니다.
active의 속성을 css에서 컨트롤 합니다.
그리고 img 태그에 animation keyframe를 사용하여 방향을 컨트롤 합니다.
더 많은 컨텐츠를 보고 싶은 분들은 방문해서 구경오세요:)
TriplexLab Blog