- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다.
- 하지만 저번에 했던 것과 다른 점이 있는데 그건 바로 첫번째 것으로 돌아가는 것이 아니라 마지막 사진 뒤에 첫번째 사진을 복사해두어서 끊김이 없게 한다는 것입니다.
- 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다.
- 스크립트 코드를 같이 보시죠
선택자
- 이번에도 필요한 선택자와 전역변수들을 하나로 모아놨습니다.
<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; //이미지 변경 시간
let sliderWidth = slider[0].clientWidth; //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
</script>- 오랜만에 보는 것이 있다면 요소의 width 값을 가져오는 clientWidth가 있겠습니다.
- 그리고 let sliderClone = sliderInner.firstElementChild.cloneNode(true); 를 사용해서 첫번째 이미지를 복사해주었습니다.
Javascript
<script>
sliderInner.appendChild(sliderClone);
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700);
currentIndex = 0;
}
}
setInterval(sliderEffect, sliderInterval);
</script>- 먼저 javascript입니다.
- 이번에도 전에 했던 것에서 몇가지를 더 추가하면 됩니다.
- setInterval를 사용하여 정해진 시간(3초)마다 함수가 실행되게 해주었습니다.
- 그리고 사진이 옆으로 넘어가는 것은 똑같습니다.
- 중요한 점은 아까 선택자부분에서 추가된 복사된 첫번째 사진을 sliderInner.appendChild(sliderClone); 를 사용해 맨 뒷쪽에 붙여넣어 주는 것입니다.
- 그리고 마지막이미지에 위치했을 때 setTimeout이라는 함수를 사용해서 함수를 처음 상태로 되돌려 주었습니다.
- 되돌릴 때 transition을 0일 주어 눈에 보이지 않게 해주었습니다.
- 이렇게 하면 첫번째 사진은 왜 추가한거야? 라는 질문이 생길 수 도있습니다.
- 그렇게 한 이유는 만약 없다면 마지막 사진이 넘어가는 것과 함수가 초기화 되는 사이에 공백이 생겨 사진이 없는 장면이 생기기 때문입니다.
- 그렇기 때문에 처음사진을 그 공백 자리에 넣어주어 마치 자연스럽게 첫번째 사진으로 넘어가는 것처럼 만들어 주었습니다.
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>
setInterval(() => {
sliderInner.appendChild(sliderClone);
currentIndex++;
$(".slider__inner").css("position", "relative");
$(".slider__inner").animate({left : -sliderWidth * currentIndex}, 600);
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").animate({left : 0},0);
}, 700);
currentIndex = 0;
}
}, sliderInterval);
</script>- 다음은 jQuery도 같은 방식입니다.
- 선택자 부분을 $로 바꾸어주고
- transform이 없기 때문에 위치를 잡아주고 X축을 left로 바꾸어 주면 끝이 납니다.
GSAP
<script>
setInterval(() => {
sliderInner.appendChild(sliderClone);
currentIndex++
gsap.to(".slider__inner", {
x : -sliderWidth * currentIndex,
duration : 0.6,
});
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.to(".slider__inner", {
x : 0,
duration : 0
});
},700);
currentIndex = 0;
}
}, sliderInterval);
</script>- GSAP도 쓰는 방법만 안다면 어렵지 않습니다.
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)";
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";이 4줄을 GSAP방식으로 바꾸어 주면 되기 때문이죠
gsap.to(".slider__inner", {
x : -sliderWidth * currentIndex,
duration : 0.6,
});
gsap.to(".slider__inner", {
x : 0,
duration : 0
});- 바로 이렇게 말이죠
- 이렇듯 같은 애니메이션이라도 그냥 javascript를 사용하느지 아니면 어떤 라이브러리를 사용하지는지에 따라 다양한 표현방식이 있습니다. 사람들이 많이 쓰거나 자신이 편한 것을 선택하여 코드를 짜면 되는 것이죠!! 오늘도 수고하셨습니다.
- 끝!