Slider Effect만들기3
이번엔 Slider Effect2와 다르게 세로로 슬라이드효과를 주도록 만들어 보겠습니다.
코드블럭
<!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: 4000px;
height: 450px; */
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img06 bg06 font02">
<header id="header">
<h1>Javascript Slider Effect02</h1>
<p>슬라이드 이펙트: 좌로 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li class="active"><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><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"><img src="img/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="img/sliderEffect08-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="img/sliderEffect10-min.jpg" alt="이미지5"></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 sliderInterval = 3000; //이미지 변경 간격시간(3초)
</script>
<script>
// sliderInner.style.transform = translateX("0px"); //-800*0
// sliderInner.style.transform = translateX("-800px"); //-800*1
// sliderInner.style.transform = translateX("-1600px"); //-800*2
// sliderInner.style.transform = translateX("-2400px");
// sliderInner.style.transform = translateX("-3200px");
// sliderInner.style.transform = translateX("-0px");
// sliderInner.style.transition = "all 0.6s";
// setInterval(() => {
// currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 5
// sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
// }, sliderInterval);
</script>
<!-- GSAP -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(()=> {
currentIndex = (currentIndex + 1 ) % sliderCount;
gsap.to(".slider__inner", {
y : -450 * currentIndex,
duration : 1,
ease: "elastic.out(1,0.3)"
})
}, sliderInterval);
</script> -->
<!-- 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>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative")
$(".slider__inner").animate({top : -450 * currentIndex}, 1000, "easeOutElastic");
}, sliderInterval);
</script>
</body>
</html>보충설명
✨ sliderInner 요소에 transition 속성을 설정하여 슬라이더가 움직일 때 애니메이션 효과가 부드럽게 적용되도록 합니다. 이 속성을 이용하여 슬라이더 이미지가 이동할 때 전환 효과가 적용되며, 0.6s 시간 동안 애니메이션 효과가 지속됩니다.
✨ setInterval() 함수를 사용하여 일정한 시간 간격으로 이미지를 변경하도록 합니다.
✨ 이미지를 변경하기 위해서는 currentIndex 값을 업데이트하고, 이를 이용하여 .slider__inner 요소의 translateY 값을 변경해야 합니다. 때문에 style.transform 속성을 이용하여 translateY() 함수를 사용하여 요소를 이동시킵니다. (세로로 슬라이드 됩니다.)
✨ currentIndex 값을 이용하여 이동할 위치를 계산하고, -450 값과 곱하여 이동 거리를 설정합니다. 이렇게 하면 이미지가 수직으로 부드럽게 이동하면서 변경되는 효과를 구현할 수 있습니다.
GSAP
✨ 이 코드는 GSAP(GreenSock Animation Platform) 라이브러리를 이용하여 이미지를 부드럽게 전환하는 기능을 추가하고 있습니다. HTML 문서 내에서 GSAP 라이브러리를 불러와야 합니다.
✨ setInterval 함수를 사용하여 일정한 시간 간격으로 이미지를 전환하는 반복 작업을 수행합니다.
✨ currentIndex 변수에 저장하고, sliderInterval 변수에 지정된 시간(3초) 마다 이미지를 변경합니다.
이미지를 변경하기 위해서는 currentIndex 값을 업데이트하고, 이를 이용하여 .slider__inner 요소의 y 값을 변경해야 합니다.
✨ GSAP 라이브러리를 이용하면 gsap.to() 함수를 사용하여 요소를 선택하고, 이를 이용하여 애니메이션 효과를 부여할 수 있습니다. 이 함수를 사용하여 .slider__inner 요소를 선택하고, y 속성을 이용하여 currentIndex 값을 기반으로 이동할 위치를 계산하고, 이동 시간을 1초로 지정하며, 이동 속도를 "elastic.out(1,0.3)"로 설정합니다. 이로써 이미지가 부드럽게 이동하면서 변경되는 효과를 구현할 수 있습니다.
GSAP 홈페이지 : https://greensock.com/