슥슥 위로 지나가는 슬라이드 효과

슬라이드 이펙트 03

2번은 이미지가 오른쪽에서 왼쪽으로 넘어가게 해주는 슬라이드 효과입니다.

htnl에 이미지를 담는 박스 하나가 더 추가 되었고 css와 script 부분이 조금 수정되었습니다.

    <main id="main">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="./img/slider06-min.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="./img/slider07-min.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="./img/slider08-min.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="./img/slider09-min.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="./img/slider10-min.jpg" alt="이미지5"></div>
                </div>            
            </div>
        </div>
    </main>

이미지 전체를 움직이기 위해 inner 박스로 이미지를 감싸 주었습니다. 

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

slider__inner를 만들어 준뒤 그 안의 이미지들을 정렬하기 위해 flex를 주고 flex-wrap까지 넣어주면 이미지가 오른쪽으로 정렬 됩니다. 그리고 width,height값을 지정해줍니다.

slider도 포지션을 relative로 변경 해줍니다.  이미지inner에  한 부분만 보여줄것이기 때문에 보여지는 영역인 slider__img에 넘쳐나는 이미지를 가려주기 위한 overflow:hidden을 넣어 줍니다.

 

script

2번 부터는 script 부분을 3가지 방식으로 해줄것입니다.

    <script>

        sliderInner.style.transition = "all 0.6s"

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

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

        // sliderInner.style.transform = translateX("-0px")
        // sliderInner.style.transform = translateX("-800px")
        // sliderInner.style.transform = translateX("-1600px")
        // sliderInner.style.transform = translateX("-2400px")
        // sliderInner.style.transform = translateX("-3200px")
        // sliderInner.style.transform = translateX("-0px")

   
    </script>

첫번째 방법 -  javascript

1번과 같이 setInterval을 해준 뒤  currentIndex 값을 동일하게 해줍니다.

그 후 이미지를 감싸는 박스인 inner박스에 style을 주어 transform을 적용시키고 translateY를 주어 x값을 변경시키는데 

이 변경 값은 이미지의 heght값인 450이니 450만큼 이동해주며 각 currentIndex의 값을 곱하여  -450*currentIndex를 써줍니다. 그럼 inner박스가 -450씩 Y축으로 이동하여  다음 이미지가 보여진다.

 

두번째 방법 - GASP

    //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: "elastic.out(1, 0.3)"
            })
        }, sliderInterval)
    </script>

두번째 방법은 GASP 는 라이브러리를 가져와야 사용이 가능하다

currentIndex까지는 첫번째와 같다.

 

gsap를 사용할 때 gsap.to를 사용하고 위치를 선정해줘야한다. gasp는 translateY라고 표기하지 않고 y라고 만 표기해도 된다. -450 * currentIndex 를 해주면 간단하게 해결된다.

 

세번째 방법 - jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        setInterval(() => {
            currentIndex = (currentIndex + 1 ) % $(".slider").length;

            $(".slider__inner").css("position","relative")
            $(".slider__inner").animate({top : -450 * currentIndex}, 1000)

        }, sliderInterval)
    </script>

jQuery 도 라이브러리를 가져와야 사용이 가능하며 currentIndex는 동일하다.

$를 사용하여 위치를 정해주고 .animate를 사용하여 이동을 할 위치(top) 와 값 -450 * currentIndex,다음 속도를 써 주면 완성된다.

옆으로 움직이는 2번과 거의 동일 하며 2번에선 width값과 x축으로 움직였지만 3번인 위로 올라가는 효과는 height 값과 y축 또는 top값으로 움직이는 차이 밖에 없다.