슬라이드 효과 만들기(translateY 연속)

연속적으로 위로 넘어가는 슬라이드 효과 만들기

이번에는 사진이 연속적으로 끝 없이 위로 넘어가는 슬라이드 효과를 만들어 보도록 하겠습니다.

 

HTML 작성하기

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="img/sliderEffect06-min.jpg" alt="이미지6"></div>
                <div class="slider s2"><img src="img/sliderEffect07-min.jpg" alt="이미지7"></div>
                <div class="slider s3"><img src="img/sliderEffect08-min.jpg" alt="이미지8"></div>
                <div class="slider s4"><img src="img/sliderEffect09-min.jpg" alt="이미지9"></div>
                <div class="slider s5"><img src="img/sliderEffect10-min.jpg" alt="이미지10"></div>
            </div>
        </div>
    </div>
</main>

HTML 알아보기

• translateX를 사용할 때와 다르지 않습니다.

CSS 작성하기

변경된 css

• translateX를 이용하여 좌로 이동할 때는 사진이 가로 정렬되어야 하기 때문에 slider__inner에 display : flex의 속성을 주었지만 지금은 사진을 가로 정렬할 필요가 없기 때문에 slider__inner의 속성을 없애주었습니다.
• 나머지는 동일합니다.

Javscript 작성하기 ( javascript 사용 )

<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 sliderWidth = slider[0].clientWidth;            // 이미지 width값
    let sliderHeight = slider[0].clientHeight;
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);    // 첫 번째 이미지 복사

    let sliderInterval = 2000; 
    // 복사한 첫 번째 이미지 마지막에 붙여넣기
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        sliderInner.style.transition = "all 0.8s";
        sliderInner.style.transform = `translateY(-${sliderHeight * currentIndex}px)`;

        // 마지막 이미지 순서에
        if(currentIndex == sliderCount){
            setTimeout(() => {
                sliderInner.style.transition = "all 0s";
                sliderInner.style.transform = `translateY(0px)`;
            }, 700);
            currentIndex = 0;
        };
    };

    setInterval(sliderEffect, sliderInterval);
</script>

javscript 정리해보기

• sliderHeight라는 변수를 하나 더 만들어 clientHeight를 사용하여 각 이미지의 height값을 저장했습니다.
• 그 외에는 translateX를 모두 translateY로 바꾸어주고(X축 이동에서 Y축 이동으로),
• 이동거리를 계산하는 식에서 sliderWidth값을 전부 slideHeight로 바꾸어 주었습니다.
• 마찬가지로 setInterval함수에 sliderInterval의 시간마다 반복하도록 넣었습니다.

Javascript 작성하기 ( GSAP 사용 )

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    function sliderEffect(){
        currentIndex++;

        gsap.to(sliderInner, {
            y : -sliderHeight * currentIndex,
            duration : 0.5,
            ease : "power.out"
        });

        if(currentIndex == sliderCount){
            setTimeout(() => {
                gsap.to(sliderInner, {
                    y : 0,
                    duration : 0,
                    ease : "power.out"
                });
            }, 700);
            currentIndex = 0;
        };
    };

    setInterval(sliderEffect, sliderInterval);
</script>

javscript 정리해보기

• 좌로 이동에서 위로 이동일 때 gsap에서 변경되는 사항입니다.
• 이동 기준을 x에서 y로 바꾸어줍니다.
• 이동거리 계산의 sliderWidth값을 sliderHeight 값으로 바꾸어 줍니다.

Javascript 작성하기 ( 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>
    function sliderEffect(){
        currentIndex++;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({top : -sliderHeight * currentIndex}, 500);

        if(currentIndex == sliderCount){
            setTimeout(() => {
                $(".slider__inner").animate({top : 0}, 0);
            }, 700);
            currentIndex = 0;
        };
    };

    setInterval(sliderEffect, sliderInterval);
</script>

javascript 정리해보기

• jQuery에서의 변경사항은 다음과 같습니다.
• 이동 기준을 left에서 top으로 바꾸어줍니다.
• 이동 거리 계산에서 sliderWidth값을 sliderHeight값으로 바꾸어줍니다.

 

 

 

이상으로 무한하게 위로 넘어가는 슬라이드 효과를 세 가지 스크립트를 통해 만들어 보았습니다 !