슬라이드 이펙트_02 : 이미지를 슬라이드 하는 3가지 방법!

슬라이더 이펙트 02

슬라이더 이펙트를 Javascript/GSAP/Jquery를 통해 구현해보도록 하겠습니다~

---

Javascript 개념 소개

객체 기반의 스크립트 언어로 웹 브라우저에서 해석되는 인터프리터 언어입니다.

하단의 코드를 통해 gsap로 이미지 슬라이드를 구현합니다.

const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
const slider = document.querySelectorAll(".slider");            //이미지

let currentIndex = 0;

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

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

---

GSAP 개념 소개

GSAP란? 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다. 이 GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있어요.

하단의 코드를 통해 gsap로 이미지 슬라이드를 구현합니다.

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

let currentIndex = 0;
    
setInterval(()=>{
    currentIndex = (currentIndex + 1 ) % slider.length;
    //to: 누구누구에게 애니메이션을 준다
    //예: slider__inner 클래스에게 애니메이션을 주겠다.
    gsap.to(".slider__inner", {
        x : -800 * currentIndex //여기서 x는 translateX
    });
}, 2000);

---

Jquery 개념 소개

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리이며, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.

하단의 코드를 통해 jQuery로 이미지 슬라이드를 구현합니다.

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

let currentIndex = 0;
    
setInterval(()=> {
    currentIndex = (currentIndex + 1 ) % $(".slider").length;

    // $(".slider__inner").animate({
    //     transform: "translateX(" + -800 * currentIndex + ")"
    // },2000) //document.querySelector의 역할

    $(".slider__inner").css("position", "relative")
    
    $(".slider__inner").animate({
        left : -800 * currentIndex
    }, 600)
    
},2000);

---

구현예제