Slider Effect 03 - 위쪽으로 움직이기에 대해 알아보자

이번에는 위로 움직이는 슬라이드를 만들어 봤습니다.

왼쪽으로 움직이는 슬라이드는 X축을 중심으로 움직였습니다.

따라서 이번 슬라이드 효과는 Y축을 중심으로 움직인다는 것을 우츄할 수 있습니다.

그렇기 때문에 지난 번과 별로 다른 것이 없습니다.

 

공통된 style 부분과 선택자 부분은 생략하겠습니다.

script - javascript

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);

translateY 를 중심으로 -450 즉, 사진의 세로 길이만큼 움직이게 설정했습니다.

script - GSAP

setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

    gsap.to(sliderInner, {
        y : -450 * currentIndex,
        duration : 1,
        ease : "elastic.out(1, 0.3)"
    })
}, sliderInterval);

javascript 의 설정과 마찬가지로 y축 중심, 세로 길이만큼의 움직임을 설정했습니다.

script - jQuery

setInterval(() => {
    currentIndex = (currentIndex + 1) % $(".slider").length;

    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({top : -450 * currentIndex}, 600, "easeOutElastic");
}, sliderInterval);

jquery 의 설정도 위의 두 가지의 방식과 같습니다.