위로(연속적으로) 올라가는 슬라이드 유형

슬라이드 05

 

 

이번 유형은 슬라이드가 위로 올라가는 유형이다. 4번과 비슷한 구조이지만 sliderInner가  x축과 y축으로 움직인다는 차이가 있다.

 

        .slider__inner { /*전체 이미지를 감싸고 있는 부모 : 움직이는 영역*/
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            height: 2700px;
        }
        .slider { /*개별적인 이미지*/
            position: relative;
            width: 800px;
            height: 450px;
        }

slider__inner 부분에 height 값을 이미지의 갯수 * 450 으로 설정해야합니다.

하나의 이미지가 복사 되어 총 이미지는 6개이므로 6 * 450 = 2700을 설정해주었습니다.

 

script

        let currentIndex = 0;   //현재보이는 이미지
        let sliderCount = slider.length;  //이미지 갯수
        let sliderHeight = slider[0].offsetHeight;  //이미지 세로값
        let sliderInterval = 1000; //이미지 변경 시간
        let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지

이미지의 세로값을 구하기 위해   변수 sliderHeight를 만들어줍니다.

이미지 요소의 세로 값을 구하기 위해 offsetHeight을 사용해줍니다. 각각의 이미지는 slider에 해당되기 때문에 이미지 하나의 slider[0]에  세로 값을 가져옵니다.

그 후 4번 과 동일하게 firstElementChild.cloneNode를 사용하여 첫번째 이미지를 복사해줍니다.

 

       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 = "translateX(0px)"
                },700);
                currentIndex = 0;
            } 
        }
        setInterval(sliderEffect,sliderInterval)

appenChild를 사용하여 sliderInner뒤에 위치 시켜줍니다.

 

sliderEffect라는 함수를 만들고 currentIndex가 증가될수있게 currentIndex++을 사용해주고 

sliderInner에style.transform을 부여 해줍니다 y축으로 움직일수 있게  translateY를 준 뒤  값은 sliderHeight  * currentIndex값을 줍니다. 그리고 움직임의 시간초를 부여하기위해 transition도 줍니다.

 

그 후 이미지가 끝에 갔을 경우 다시 자연스럽게 돌아오기 위해 if 조건문을 사용해줍니다

조건은 (currentIndex == sliderCount) 출력화면이 이미지 갯수와 동일 할때 라고 조건을 걸어줍니다.

그 안에 함수setTime 을 설정해준뒤 setTime은 sliderInner에 style.transform 과 transition을 줍니다.

transform을 translateY 값 0으로 설정해주어 다시 처음으로 돌아오게 해줍니다. 돌아오는 속도는 transition0으로 하여 자연스럽게 돌아가게 합니다.

 

미션

GSAP 로 구현하기

        <!-- //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.6})

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

                currentIndex = 0;
            }
        }
        setInterval(sliderEffect, sliderInterval)
    </script> -->

GSAP는 라이브러리를 가져와서 작업을 해야한다.  gsap.to 를 사용하여 style.transition 과 transform의 값을 설정할수있다. 

 

jQuery로 구현하기

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
         $(".slider__inner").append(sliderClone);
        
        function sliderEffect() {
            currentIndex++;

            $(".slider__inner").animate({top:-sliderHeight * currentIndex}, 600) 

            //마지막 이미지에 위치 했을 때
            if (currentIndex == sliderCount){
                setTimeout(() => {
                    $(".slider__inner").animate({top:0}, 0)
                });
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect, sliderInterval)
        </script>

jQuery 도 gsap와 같이 라이브러리를 가져와서 작업해줍니다.

jQuery는 gsap와 달리 $를 사용한다. 그후 style을 주려면 animate를 사용하여 설정 값을 줍니다. jQuery는 translate가 없기 때문에 top 값을 줘 top - 값으로 이동하게 해주어야한다.