자바스크립트 슬라이드 효과(5)에 대해 알아보자!

오늘은 위쪽으로 슬라이드가 넘어가는데, 3번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다!

자바스크립트 슬라이드 효과

슬라이드 효과 5 

슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다.(연속적)

구조

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="./img/sliderEffect04-min.jpg" alt="이미지1"></div>
                <div class="slider s2"><img src="./img/sliderEffect08-min.jpg" alt="이미지2"></div>
                <div class="slider s3"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
                <div class="slider s4"><img src="./img/sliderEffect06-min.jpg" alt="이미지4"></div>
                <div class="slider s5"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</main>
<!-- //main -->

스크립트_선택자 및 변수 설정하기

<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 = 2000;                                              // 이미지 변경 간격 시간
    let sliderHeight = slider[0].clientHeight;                              // 이미지 세로값 구하기
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);        // 첫 번째 이미지 복사
</script>

슬라이드 효과 4에서는 clientWidth값을 통해 이미지 가로값을 구했으니 이번엔 clientHeight를 통해 이미지의 세로값을 구해줍니다. 그리고 CSS 속성중에서도 display: flex; 속성을 없애줍니다.

 

스크립트_javascript

<script>
    // 복사한 첫 번째 이미지 마지막에 붙여넣기
    sliderInner.appendChild(sliderClone);

    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>

-sliderInner 변수에 있는 DOM 요소에 sliderClone 변수에 저장된 첫 번째 이미지를 복사하여 마지막 자식으로 추가합니다. 이를 통해 슬라이딩이 끝난 후 첫 번째 이미지가 다시 나타나 슬라이딩 효과가 연속적으로 발생할 수 있습니다.

-sliderEffect 함수를 정의합니다. 이 함수는 currentIndex 변수를 증가시킵니다.

-sliderInner 변수가 참조하는 DOM 요소의 스타일 속성 중 transition 속성과 transform 속성을 변경하여 슬라이딩 효과를 생성합니다. transition 속성은 0.6초 동안 적용되도록 설정되어 있습니다. transform 속성은 translateY 함수를 이용해 현재 이미지의 높이(sliderHeight)와 currentIndex 값을 곱한 만큼 요소를 위로 이동시킵니다.

-if문에서는 currentIndex가 sliderCount(이미지 갯수)와 같아지면 마지막 이미지에 위치했음을 의미합니다. 이 경우 sliderInner 변수가 참조하는 DOM 요소의 스타일 속성을 변경하여 다시 처음 위치로 이동시킵니다. 이 때 setTimeout 함수를 사용해 0.7초 후에 위치를 변경합니다. 이유는 transition 속성을 0초로 변경한 뒤 바로 위치를 변경하면 이동 효과가 적용되지 않아 이동 효과가 끝날 때까지 대기하기 위함입니다.

-currentIndex가 0으로 초기화되고, setInterval 함수를 이용해 일정 시간(sliderInterval)마다 sliderEffect 함수를 실행시키면서 슬라이딩 효과를 반복합니다.

스크립트_GSAP

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        gsap.to(sliderInner, {
            y: -sliderHeight * currentIndex,
            duration: 0.6
        });

        // 마지막 이미지에 위치했을 때 
        if(currentIndex == sliderCount){
            setTimeout(() => {
                gsap.to(sliderInner, {
                    y: 0,
                    duration: 0
                });
            }, 700);
            currentIndex = 0;
        }
    };

    setInterval(sliderEffect, sliderInterval);
</script>

-sliderInner 변수에 있는 DOM 요소에 sliderClone 변수에 저장된 첫 번째 이미지를 복사하여 마지막 자식으로 추가합니다. 이를 통해 슬라이딩이 끝난 후 첫 번째 이미지가 다시 나타나 슬라이딩 효과가 연속적으로 발생할 수 있습니다.

-sliderEffect 함수를 정의합니다. 이 함수는 currentIndex 변수를 증가시킵니다.

-gsap.to 함수를 이용해 sliderInner 변수가 참조하는 DOM 요소의 위치를 변경하여 슬라이딩 효과를 생성합니다. 이 때 duration 속성을 0.6초로 설정하며, y 속성을 이용해 현재 이미지의 높이(sliderHeight)와 currentIndex 값을 곱한 만큼 요소를 위로 이동시킵니다.

-if문에서는 currentIndex가 sliderCount(이미지 갯수)와 같아지면 마지막 이미지에 위치했음을 의미합니다. 이 경우 setTimeout 함수를 사용해 0.7초 후에 위치를 변경합니다. 이 때 gsap.to 함수를 이용해 y 속성을 이용해 요소를 0px 위치로 이동시킵니다. 이동 효과는 duration 속성이 0이므로 적용되지 않습니다.

-currentIndex가 0으로 초기화되고, setInterval 함수를 이용해 일정 시간(sliderInterval)마다 sliderEffect 함수를 실행시키면서 슬라이딩 효과를 반복합니다.

스크립트_jQuery

<!-- 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>

    sliderInner.append(sliderClone);

    function sliderEffect(){
        currentIndex++;

        $(".slider__inner").css({
            'transition': 'all 0.6s',
            'transform': `translateY(-${sliderHeight * currentIndex}px)`
        });

        if(currentIndex == sliderCount){
            setTimeout(() => {
                $(".slider__inner").css({
                    'transition': '0s',
                    'transform': 'translateY(0px)'
                });
            }, 700);
            currentIndex = 0;
        }
    };

    setInterval(sliderEffect, sliderInterval);
</script>

-코드를 자세히 살펴보면, HTML 구조에서 이미지 슬라이더를 담고 있는 .slider__wrap 요소와 이미지를 담고 있는 .slider__inner 요소, 그리고 개별 이미지를 담고 있는 .slider 요소를 선택하고 있습니다.

-sliderInner.append(sliderClone); 코드는 첫 번째 이미지를 복제하여 마지막 이미지 다음에 추가합니다.

-sliderEffect 함수는 setInterval 함수에 의해 일정 시간 간격으로 호출됩니다. 함수 내부에서는 현재 인덱스를 증가시키고, $(".slider__inner").css를 사용하여 슬라이더를 이동시키는 애니메이션 효과를 적용합니다.

-마지막 이미지에 위치했을 경우, setTimeout 함수를 사용하여 0.7초 후에 첫 번째 이미지로 다시 돌아가게끔 처리하고 있습니다.

-이 코드에서 사용된 jQuery는 HTML 문서의 요소들을 쉽게 선택하고 조작할 수 있는 라이브러리입니다. jQuery UI는 jQuery를 기반으로 한 UI 컴포넌트 라이브러리로, 사용자 인터페이스 요소들을 손쉽게 제작할 수 있도록 도와줍니다.