JS, jQuery, GSAP로 슬라이드 이펙트 적용해보기! - 5 부드럽게 위아래!

CSS

<style>
    /* 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 { /*이미지 움직이는 영역 */
        height: 450px;
        width: 4800px;  /*이미지의 총 길이 4800*/
    }
    .slider {  /*개별적인 이미지*/
        position: relative;
        width: 800px;
        height: 450px;
    }
</style>

HTML

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

slider__inne부분에서 이미지를 각각 나눠주고 마지막 사진에서 다시 1번으로 돌아오기 위해 class 명에 s1,s2...를 붙여 주었습니다.

 

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].offsetHeight;                    //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);  
let sliderInterval = 2000;

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

좌우로 움직이던 슬라이드 이펙트의 선택자와 다름이 없으나 바꾸어야할 것이 하나 있습니다. offsetWidth가 아닌 offsetHeight 입니다.

위아래로 움직여주기 위한 것이기 때문에 offsetHeight를 사용합니다.

 

offsetHeight

offsetHeight는 HTML 요소의 높이를 나타내는 속성입니다. 이 속성은 해당 요소의 경계 상자(border box)의 높이를 포함하여 padding, border, 그리고 element의 높이를 합한 값을 반환합니다.

 

javascript

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