슬라이드 이펙트 2

슬라이드 효과 만들기

이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다.

슬라이드 효과 : 좌로 움직이기

슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다. 이번 슬라이드 효과는 이미지가 좌우로 넘어가며 보여집니다.

HTML 코드

슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다.

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider__inner">
            <div class="slider"><img src="../assets/img/effect_bg06-min.jpg" alt="이미지6"></div>
            <div class="slider"><img src="../assets/img/effect_bg07-min.jpg" alt="이미지7"></div>
            <div class="slider"><img src="../assets/img/effect_bg08-min.jpg" alt="이미지8"></div>
            <div class="slider"><img src="../assets/img/effect_bg09-min.jpg" alt="이미지9"></div>
            <div class="slider"><img src="../assets/img/effect_bg10-min.jpg" alt="이미지10"></div>
        </div>
    </div>
</div>

CSS 코드

각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니다.

.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative;
    width: 800px;
    height: 450px;
}
.slider {
    position: absolute;
    left: 0;
    top: 0;
}
.slider::before {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}

사진 움직이기

전체 이미지를 감싼 slider__inner를 좌로 이동시켜, 사진이 좌로 넘어가는 듯한 효과를 주었습니다. 애니메이션을 주는 방법으로 javascript, GSAP, jQuery를 이용해 보았습니다. 각각의 작성법을 잘 알아두었다가 적절하게 사용해 봅시다!

Javascript를 이용하기

자바스크립트를 작성해 전체 이미지를 감싼 slider__inner를 좌로 이동시켜, 사진이 좌로 넘어가는 듯한 효과를 주었습니다.
setsetInterval() 메소드를 이용하면 n초에 한번씩 실행문이 작동되도록 할 수 있습니다.

const sliderInner = document.querySelector(".slider__inner");
const slider = document.querySelectorAll(".slider");
let currentIndex = 0;

sliderInner.style.transition = "all 0.6s"
setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;

    sliderInner.style.transform = "translateX("+ -800  * currentIndex + "px)";
},2000);

GSAP를 이용하기

GSAP를 작성해 전체 이미지를 감싼 slider__inner를 좌로 이동시켜, 사진이 좌로 넘어가는 듯한 효과를 주었습니다.
GSAP를 사용하려면 cdn을 연결해주어야 하며, gsap.to 를 이용하면 GSAP로 애니메이션을 만들 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
    const slider = document.querySelectorAll(".slider");
    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex + 1) % slider.length;

        gsap.to(".slider__inner", {
            duration : 0.6, //애니메이션 변화를 0.6초 동안
            x : -800 * currentIndex //x축으로 이동
        });
    },2000);
</script>

jQuery를 이용하기

제이쿼리를 작성해 전체 이미지를 감싼 slider__inner를 좌로 이동시켜, 사진이 좌로 넘어가는 듯한 효과를 주었습니다.
제이쿼리 또한 사용하려면 cdn을 연결해주어야 하며, animate와 css 속성을 변경하는 방식으로애니메이션을 줄 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;
        
        //제이쿼리는 css의 속성을 변경하는 방식으로 애니메이션을 줄 수 있습니다.
        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({left : -800 * currentIndex}, 600)
    },2000);
</script>

원본 페이지 보기