- 위의 페이지처럼 시간이 지나면 사진이 상하로 바뀌는 스크립트입니다.
- 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다.
- 스크립트 코드를 같이 보시죠
- 아 이번에는 css에서 바뀐 점이 하나 있는데 바로 사진들을 가로가 아닌 세로로 세워놔야한다는 것입니다.
- 그래서 display:flex를 주지 않았습니다.
선택자
- 선택자와 전역변수들을 하나로 모아놨습니다.
<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; //이미지 변경 시간
</script>Javascript
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount ;
console.log(currentIndex)
sliderInner.style.transform = "translateY("+ -520 * currentIndex + "px)"
},sliderInterval);
sliderInner.style.transition = "all 1s";
</script>- 먼저 javascript입니다.
- 전에 했던 것과 거의 비슷합니다. 이번엔 X축이 아니라 Y축으로 사진의 높이 만큼이동해주면 됩니다.
- setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다.
- currentIndex = (currentIndex + 1) % sliderCount;으로 이미지의 인덱스 값을 구해서,
sliderInner.style.transform = "translateY("+ -520 * currentIndex + "px)" },sliderInterval);로 sliderInner에게 X축으로 520px씩 움직이는 transform속성을 부여하였습니다.
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(() => {
currentIndex = (currentIndex + 1) % sliderCount;
$(".slider__inner").css("position", "relative")
$(".slider__inner").animate({top : -520 * currentIndex}, 1000, "easeOutElastic");
}, sliderInterval);
</script>- 다음은 jQuery도 기본적인 것은 비슷합니다.
- 역시나 X축을 Y축으로 바꾸어 주면 됩니다.
- 그래서 $(".slider__inner").animate({top : -520 * currentIndex}, 1000, "easeOutElastic"); }, sliderInterval);
- left를 top으로 바꾸어주었습니다.
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 : -520 * currentIndex,
duration : 1,
ease : "elastic.out(1, 0.3)"
})
}, sliderInterval);
</script>- GSAP도 x를 y로 바꿔주기만 하면 되기 때문에 어렵지 않습니다.
- 그리고 gsap.to를 사용해서 x축으로 800px 씩 가게되어 있는 것을 y로 520px씩 가게 바꾸어 주면 끝이납니다.
- 끝!