슬라이드 이펙트 - 위로 움직이기

슬라이드 이펙트 - 위로 움직이기

 

 

 

💜 슬라이더 이펙트 05

코드 보기 / 완성 화면

 

style

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

위로 움직이게 하기 위해선

display:flex와 flex-wrap:wrap을 없애줘야합니다.

 

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 = 3000;               //이미지 변경 간격 시간
let slidertHeight = slider[0].offsetHeight;  //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사

선택자는 전과 동일합니다.   

 

currentIndex 변수를 0으로 초기화

이미지의 개수를 나타내는 sliderCount 변수는 slider배열의 길이로 설정

이미지 변경 간격 시간을 나타내는 sliderInterval 변수는 3000ms로 설정해줍니다.

sliderHeigt로 슬라이드 이미지의 가로값을 구해줍니다.

 

마지막으로 첫번째 이미지를 복사하여 sliderInner의 첫 번째 자식 요소로 추가해줍니다.

 

 

 

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

function sliderEffect (){
    currentIndex++;

    sliderInner.style.transition = "all 0.6s";
    sliderInner.style.transform = "translateY(-"+ sliderWidth * currentIndex +"px)";

    //마지막 이미지에 위치 했을 때
    if(currentIndex == sliderCount){
        setTimeout(() => {
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)";
        }, 700)
        currentIndex = 0;
    }
}
setInterval(sliderEffect, sliderInterval);

sliderEffect 함수는 슬라이더의 현재 이미지를 1씩 증가시켜 

sliderInner요소의 transition 속성과 transform 속성을 변경하여 슬라이더 이미지를 이동

 

translateY를 사용해 세로측으로 이미지를 이동시키고, sliderWidth * currentIndex 를 통해 현재 보여지는 이미지의 위치를 계산.

 

if문을 사용해 마지막 이미지에 위치했을 경우 처리

마지막 이미지에 위치했다면 0.7초 뒤에 첫 번째 이미지로 이동하는 효과를 구현하기 위해

setTimeout 함수를 사용

transtion 속성을 0초로 설정하고 transform 속성을 translateX로 설정

첫 번째 이미지로 이동

currentIndex를 0으로 재설정해 다시 처음부퍼 슬라이더를 보여준다.

 

setInterval함수를 사용해 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, {
            duration: 0.6,
            y: -sliderHeight * currentIndex,
            onComplete: function (){
                if(currentIndex == sliderCount){
                    gsap.to(sliderInner, {
                        duration: 0,
                        y: 0,
                    });
                    currentIndex = 0;
                }
            },
        });
    }
    setInterval(sliderEffect, sliderInterval);
</script>

gsap.to 함수를 사용해 sliderInner요소의 y속성을 변경하여 슬라이더 이미지를 이동

y속성을 사용하여 세로축으로 이미지를 이동시키고

-sliderHegiht * currentIndex 를 통해 현재 보여지는 이미지의 위치를 계산

 

onComplete옵션을 사용해 애니메이션이 완료된 후 처리할 로직을 작성

gsap.to함수를 사용해 sliderInner 요소의 y 속성을 0으로 설정

첫번째 이미지로 이동

currentIndex 를 0으로 재설정하여 다시 처음부터 슬라이더를 보여줌

 

setInterval 함수를 사용해 sliderEffect 함수를 주기적으로 호출하여 슬라이더가 자동으로 이동하도록 하고 sliderInterval변수에 저장된 간격으로 함수가 호출

 

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>
    // 첫번째 이미지를 마지막에 복사하여 붙여넣기
    $(".slider__inner").append(sliderClone);
    function sliderEffect() {
        currentIndex++;
        $(".slider__inner").css({
            "transition": "all 0.6s",
            "transform": "translateY(-" + sliderHeight * currentIndex + "px)"
        });
        // 마지막 이미지에 위치 했을 때
        if (currentIndex === sliderCount) {
            setTimeout(function() {
                $(".slider__inner").css({
                    "transition": "0s",
                    "transform": "translateY(0px)"
                });
            }, 700);
            currentIndex = 0;
        }
    }
    setInterval(sliderEffect, sliderInterval);
</script>

sliderClone을 sliderInner의 마지막 자식 요소로 추가

 

sliderEffect함수는 currentIndex를 1씩 증가시키고 

$(".slider__inner").css 함수를 사용해

sliderInner 요소의 transition과 transfrom 속성을 변경해 

슬라이더 이미지를 이동

 

transfrom속성을 사용해 세로축으로 이미지를 이동

-sliderHeight * currentIndex 를 통해 현재 보여지는 이미지의 위치를 계산

 

if문을 사용해 마지막 이미지에 위치했을 때 처리

setTimeout 함수를 사용해 700ms 후에 transition 속성을 0으로 설정해 애니메이션이 종료되면 다시 처음부터 슬라이더를 보여주고

currentIndex 를 0으로 재설정해 다시 처음 슬라이더를 보여준다.