728x90
- 위의 페이지처럼 시간이 지나면 사진이 상하로 바뀌는 스크립트입니다.
- 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다.
- 이건 3번과 4번을 잘 섞어서 사용하면 간단합니다.
- 스크립트 코드를 같이 보시죠
선택자
- 선택자와 전역변수들을 하나로 모아놨습니다.
// 선택자
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 sliderHeight = slider[0].clientHeight; //이미지 가로 값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 붙여넣기
sliderInner.appendChild(sliderClone);- 4번과 같습니다.
- 사진의 높이를 알아오는 변수가 추가되었습니다.
Javascript
<script>
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>- 먼저 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({top : -sliderHeight * currentIndex}, 600);
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
$(".slider__inner").animate({top : 0},0);
}, 700);
currentIndex = 0;
}
}, sliderInterval);
</script>- 다음은 jQuery도 기본적인 것은 비슷합니다.
- 선택자 부분을 $로 바꾸어주고
- transform이 없기 때문에 위치를 잡아주고 left를 top으로 바꾸어 주면 끝이 납니다.
GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
function sliderEffect() {
sliderInner.appendChild(sliderClone);
currentIndex++
gsap.to(".slider__inner", {
y : -sliderHeight * currentIndex,
duration : 0.6,
});
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
gsap.to(".slider__inner", {
y : 0,
duration : 0
});
},700);
currentIndex = 0;
}}
setInterval(sliderEffect,sliderInterval);
</script>- GSAP도 x를 y로 바꿔주기만 하면 되기 때문에 어렵지 않습니다.
- 그리고 gsap.to를 사용해서 x축으로 sliderWidth 값씩 가게되어 있는 것을 y로 sliderHeight값 만큼씩 가게 바꾸어 주면 끝이납니다.
- 끝!