JS, jQuery, GSAP로 슬라이드 이펙트 적용해보기! - 3 위 아래로 움직이기

 

 

이번 포스팅은 지난 시간에 했던 소스 코드에서 일부분만 바꾸면 간단히 적용시킬 수 있습니다.

Javascript

//javascript

sliderInner.style.transform = translateX("0px");                    // -800 * 0
sliderInner.style.transform = translateX("-800px"); // 이미지의 위드값  // -800 * 1
sliderInner.style.transform = translateX("-1600px");                // -800 * 2
sliderInner.style.transform = translateX("-2400px");                // -800 * 3
sliderInner.style.transform = translateX("-3200px");                // -800 * 4
sliderInner.style.transform = translateX("0px");                    // -800 * 0

//javascript 트랜지션 설정
sliderInner.style.transition = "all 0.6s"

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

   console.log(currentIndex);

   sliderInner.style.transform = "translateY("+ -450 * currentIndex + "px)";

}, sliderInterval);

translateX 부분을 Y로 바꿔준 뒤 800을 450으로 바꾸어 주었습니다.

마찬가지로 이 부분을 CSS에 적용 시켜주어합니다. 

 

  /* 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 {
        /* 전체 이미지를 감싸고 있는 부모 : 움직이는 영역 / 이미지의 사이즈가 450이고 다섯장이기 때문에 2250*/
        display: flex;
        flex-wrap: wrap;
        width: 800px;
        height: 2250px;
       }
       .slider {
        position: relative;
        width: 800px;
        height: 450px;
        /* 개별적인 이미지 */
       }

slider__inner부분의 h값을 이미지의 총 길이인 2250으로 바꾸어줍니다. 그러면 완성!

---

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: "circle.out(1,0.3)"
        })

    }, sliderInterval);
</script>

---

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);
    }, sliderInterval);

gsap와 jqurey도 마찬가지로 x축을 y축으로 바꿔주고 left였던 부분은 top으로 바꿔준 뒤 각각 크기를 바꿔줍니다.