728x90
Slider Effect만들기
이번 슬라이드 이펙트에서는 4번효과와 같이 연속적으로 움직이지만 y축(세로)을 기준으로 움직이도록 만들어보겠습니다.
코드블럭
<!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>마우스이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<style>
/* slider_wrap */
.slider__wrap{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img{ /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider__inner { /* 전체 이미지를 감싸고 있는 부모 : 움직이는 영역 */
/* display: flex;
flex-wrap: wrap;
width: 4800px;
height: 450px; */
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img06 bg06 font02">
<header id="header">
<h1>Javascript Slider Effect05</h1>
<p>슬라이드 이펙트: 좌로 움직이기(연속적으로)</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li class="active"><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!--header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="img/sliderEffect06-min.jpg" alt="이미지6"></div>
<div class="slider s2"><img src="img/sliderEffect07-min.jpg" alt="이미지7"></div>
<div class="slider s3"><img src="img/sliderEffect08-min.jpg" alt="이미지8"></div>
<div class="slider s4"><img src="img/sliderEffect09-min.jpg" alt="이미지9"></div>
<div class="slider s5"><img src="img/sliderEffect10-min.jpg" alt="이미지10"></div>
</div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!--footer -->
<script>
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 윰직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 전체 이미지 개수
let sliderWidth = slider[0].clientWidth; // 이미지 width값
let sliderHeight = slider[0].clientHeight;
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫 번째 이미지 복사
let sliderInterval = 2000;
</script>
<script>
// 복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.8s";
sliderInner.style.transform = `translateY(-${sliderHeight * currentIndex}px)`;
// 마지막 이미지 순서에
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "all 0s";
sliderInner.style.transform = `translateY(0px)`;
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>
</body>
</html>보충설명
✨ HTML 문서 내 ".slider__wrap" 클래스를 가진 요소를 선택하여 sliderWrap 변수에 할당하고, 이하 동일한 방식으로 필요한 요소들을 선택하여 변수에 할당합니다. currentIndex, sliderCount, sliderWidth, sliderHeight, sliderClone, sliderInterval 등의 변수를 초기화합니다.
✨ 두 번째 script 태그에서는 sliderInner에 복사된 첫 번째 이미지를 마지막에 붙여넣기 합니다.
✨ sliderEffect() 함수는 현재 이미지 인덱스(currentIndex)를 1 증가시키고, 선택된 이미지의 영역(sliderInner)에 대해 translateY() 속성을 이용하여 이동합니다.
✨ 조건문에서는 만약 마지막 이미지에 위치했다면, 현재 위치를 초기화하고 애니메이션 효과를 끄기 위해 일정 시간(0.7초)을 기다린 후, translateY() 값을 0으로 설정하여 첫 번째 이미지로 이동시킵니다.
✨ setInterval() 함수를 이용하여 sliderEffect() 함수를 일정한 시간 간격으로 반복 실행합니다. 이때 sliderInterval 변수에 저장된 시간(2초)만큼 간격을 두고 실행됩니다.
GSAP와 jQuery로 변환하기(세로축 이동)
<!-- // GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
function sliderEffect(){
currentIndex++;
gsap.to(sliderInner, {
y : -sliderWidth * currentIndex,
duration : 0.5,
ease : "power.out"
});
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.to(sliderInner, {
y : 0,
duration : 0,
ease : "power.out"
});
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>
<!-- //jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
function sliderEffect(){
currentIndex++;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top : -sliderHeight * currentIndex}, 500);
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").animate({top : 0}, 0);
}, 700);
currentIndex = 0;
};
};
setInterval(sliderEffect, sliderInterval);
</script>