이번에는 위에서 아래로 연속으로 움직이는 슬라이드 이펙트를 만들어 보았습니다.
HTML
<!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>05. 슬라이드 이펙트</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; /* 총 이미지 4800 */
height: 450px;
position: relative;
}
.slider { /*개별적인 이미지*/
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img04 bg05 font06">
<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/sliderEffect07-min.jpg" alt=""></div>
<div class="slider s2"><img src="./img/sliderEffect08-min.jpg" alt=""></div>
<div class="slider s3"><img src="./img/sliderEffect09-min.jpg" alt=""></div>
<div class="slider s4"><img src="./img/sliderEffect10-min.jpg" alt=""></div>
<div class="slider s5"><img src="./img/sliderEffect01-min.jpg" alt=""></div>
</div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>
script
선택자
<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 sliderInterval = 1000; //이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; //이미지 가로값
let sliderHeight = slider[0].offsetHeight; //이미지 세로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사
</script>이번엔 상하 세로로 움직이므로 이미지의 세로 값을 구해주었습니다.
javascript
<script>
// 복사한 첫 번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex +"px)";
//마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>변수를 sliderWidth에서 새로 추가한 sliderHeight로 바꾸고 이번에도 위에서 아래로 움직이기 때문에 4번에서 만든 스크립트에서 X축을 Y축으로 바꿔주었습니다.
appendChild는 요소에 새로운 자식요소를 추가하는 매서드입니다.
liderEffect 함수는 이미지 슬라이더가 동작할 때 실행됩니다.
동작이 싱행될떄 style을 설정해줍니다.
currentIndex가 sliderCount와 같아지면, 현재 슬라이드가 마지막 슬라이드이므로, sliderInner의 transition 및 transform CSS 속성을 수정하여 첫 번째 슬라이드로 다시 돌아가도록합니다.
setInterval 함수를 사용하여 sliderEffect 함수가 일정한 간격으로 실행되도록 설정합니다.
etTimeout() 함수를 사용하여 슬라이더가 마지막 이미지에 위치할 때, sliderInner의 위치를 변경하고, currentIndex를 0으로 재설정합니다.
GSAP
<!-- GSAP -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
function sliderEffect() {
currentIndex++;
gsap.to(sliderInner, { duration: 0.6, y: -sliderHeight * currentIndex });
// 마지막 이미지에 위치했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
gsap.to(sliderInner, {
duration: 0,
y: 0,
});
currentIndex = 0;
}, 700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>gsap도 역시 변수 값을 바꾸어 주고 x축을 y축으로 변경해주었습니다.
sliderEffect() 함수는 이미지를 한 칸씩 이동시키는 함수입니다. currentIndex를 1씩 증가시키고, gsap.to()를 사용하여 sliderInner 요소를 이동시킵니다. 이때, duration은 애니메이션 진행 시간을 나타내며, x는 요소를 이동시킬 좌표를 나타냅니다.
currentIndex가 sliderCount와 같아지면, 마지막 이미지에 도달한 것이므로, setTimeout()을 사용하여 0.7초 후에 첫 번째 이미지로 이동하도록 설정합니다.
이때, gsap.to()를 사용하여 sliderInner 요소를 이동시키고, currentIndex를 0으로 초기화합니다
마지막으로, setInterval() 함수를 사용하여 sliderEffect() 함수를 일정 시간 간격으로 반복 실행합니다.
jQuery
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(".slider__inner").append(sliderClone);
function sliderEffect() {
currentIndex++;
$(".slider__inner").animate({ top: -sliderHeight * currentIndex }, 600);
// 마지막 이미지에 위치했을 때
if (currentIndex == sliderCount) {
setTimeout(() => {
$(".slider__inner").animate({ top: 0 }, 0);
currentIndex = 0;
}, 700);
}
}
setInterval(sliderEffect, sliderInterval);
</script>jQuery도 마찬가지로 변수 값을 바꾸어 주고 x축을 y축으로 변경해주었습니다.
그리고 상하로 움직이므로 left를 top으로 변경해주었습니다.
currentIndex를 1씩 증가시키고, animate()를 사용하여 slider__inner 요소를 이동시킵니다. 이때, left는 요소를 이동시킬 좌표를 나타내며, 600은 애니메이션 진행 시간을 나타냅니다.
currentIndex가 sliderCount와 같아지면, 마지막 이미지에 도달한 것이므로, setTimeout()을 사용하여 0.7초 후에 첫 번째 이미지로 이동하도록 설정합니다.
이때, animate()를 사용하여 slider__inner 요소를 이동시키고, currentIndex를 0으로 초기화합니다.
마지막으로, setInterval() 함수를 사용하여 sliderEffect() 함수를 일정 시간 간격으로 반복 실행합니다.