여러 이미지를 저장해 위로 움직여 이미지를 보여주는 페이지를 만들었습니다.
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>01. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body class="img02 bg02 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:hyejeong3283@gmail.com">hyejeong3283@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>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 { /* 이미지 움직이는 영역 */
flex-wrap: wrap;
width: 4000px;
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
</style>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; // 이미지 변경 간격 시간선택자를 변수를 선언하여 만들어줍니다.
위 선택자들은 javascript, GSAP, jQuery에서 공통적으로 사용해 줄겁니다.
javascript
<script>
// sliderInner.style.transform = translateY("0px"); // -450 * 0
// sliderInner.style.transform = translateY("-450px"); // -450 * 1
// sliderInner.style.transform = translateY("-900px");// -450 * 2
// sliderInner.style.transform = translateY("-1350px");// -450 * 3
// sliderInner.style.transform = translateY("-1800px");// -450 * 4
// sliderInner.style.transform = translateY("0px"); // -450 * 0
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount; // 1 2 3 4 0 1 2 3 4 0
sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";
}, sliderInterval);
</script>첫번째 주석처리된 부분은 CSS의 translateY 속성을 이용하여 슬라이드의 위치를 지정하는 부분입니다.
그 다음, sliderInner 요소에 대해 all 0.6s의 트랜지션을 적용시키는 코드가 있습니다.
그리고, setInterval 함수를 이용하여 일정 시간 간격으로 슬라이드를 이동시키는 코드가 있습니다.
currentIndex 변수를 사용하여 현재 보이는 슬라이드의 인덱스를 저장하고, sliderCount 변수는 전체 슬라이드의 개수를 저장합니다. currentIndex는 sliderCount를 넘어갈 경우 0으로 다시 초기화됩니다.
마지막으로, translateX 대신 translateY 속성을 사용하여 슬라이드를 이동시키는 코드가 있습니다.
currentIndex와 슬라이드 높이를 곱한 값으로 translateY 값을 계산하여 sliderInner 요소의 transform 속성에 적용합니다.
GSAP
<!-- 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>setInterval 함수를 사용하여 일정 시간 간격으로 슬라이더가 변경되도록 구현되어 있습니다.
슬라이더를 변경하기 위해서, currentIndex 변수를 사용하고, % 연산자를 이용해 sliderCount 만큼 순환하도록 합니다.
이후에는 gsap.to 함수를 사용하여, .slider__inner 클래스를 가진 엘리먼트에 대해 y 속성 값을 변경하여 애니메이션 효과를 줍니다.
duration 속성을 통해 애니메이션의 시간을 조정하고, ease 속성으로 이징 효과를 설정할 수 있습니다.
최종적으로는, 일정 시간 간격으로 currentIndex 값을 변경하면서, 해당 인덱스에 대응하는 y 속성 값을 변경하여 슬라이더를 구현하는 것입니다.
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>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({top : -450 * currentIndex}, 600, "easeOutElastic");
}, sliderInterval);
</script>setInterval() 함수를 사용하여 일정 시간 간격으로 슬라이더가 자동으로 이동하도록 설정합니다.
currentIndex 변수는 현재 활성화된 슬라이드의 인덱스를 나타냅니다.
슬라이드를 이동하는 부분은 animate() 함수를 사용합니다.
슬라이더의 내부 요소를 선택하기 위해 $(".slider__inner")를 사용합니다.
이 요소에 대해 css() 함수를 사용하여 position: relative를 설정합니다.
그리고 animate() 함수에서 top 속성 값을 -450 * currentIndex로 설정하여 슬라이더를 이동시킵니다.
이때 easeOutElastic 애니메이션 이징 함수를 사용하여 자연스러운 이동 효과를 적용합니다.
즉, 슬라이더가 이동할 때 마다 .slider__inner 요소의 top 속성 값이 변경되면서 슬라이더가 이동하게 됩니다.