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

TranslateY의 값으로 슬라이드 효과 만들기

이번에는 translateY의 값을 조절하여 이미지가 좌로 넘어가는 효과를 만들어보겠습니다.

 

HTML 작성하기

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

변경된 HTML 알아보기

• X축 이동에서 Y축 이동으로만 변한 것이기 때문에 html문서 상의 구조는 변하지 않습니다.

CSS 작성하기

/* 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 {           /* 개별 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}

변경된 CSS 알아보기

• 사진들이 세로로 정렬되어야 하기 때문에 이전 게시물에서 slider__inner에 부여했던 display:flex 속성을 포함한 다른 속성이 필요가 없기 때문에 slider__inner에 대한 내용을 지웠습니다.

Javascript 작성하기 (javascript 사용)

sliderInner.style.transition = "all 0.6s"

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

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

변경된 javascript 알아보기

• 이 전 게시물과 동일한 선택자를 사용합니다.
• 좌로 이동하는 스크립트에서 translateX를 translateY로 수정하고 이동수치를 width값(800)에서 height값(450)으로 변경했습니다.

Javascript 작성하기 (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(sliderInner, {
            y : -450 * currentIndex,
            duration : 1,
            ease : "elastic.out(1, 0.8)"
        });
    }, sliderInterval)
</script>

변경된 javascript 알아보기

• gsap를 사용할 때도 마찬가지로 translateX를 translateY로 수정했습니다.

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>
    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({top : -450 * currentIndex}, 600);
    }, sliderInterval)
</script>

변경된 javascript 알아보기

• jQuery를 사용할 때는 translate를 사용하지 못하므로 position left 값을 조절했는데, 위로 이동하기 위에서는 left를 top으로 수정해주면 됩니다.

 

 

 

이상으로 세 가지 방법으로 위로 이동하는 슬라이드 효과를 만들어 보았습니다.