Slider Effect 02 - 왼쪽으로 움직이기에 대해 알아보자

이미지가 옆으로 움직이는 슬라이드 효과를 만들어 봤습니다.

style 부분과 body 의 main 부분이 동일하니, 이번에는 생략하겠습니다.

 

javascript 와 gsap 그리고 jquery 의 세 가지 방식으로 써봤습니다.

선택자는 동일하게 적용되었기 때문에 따로 쓰자면,

 //선택자
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; //현재 보이는 이미지, 첫 번째라서 0
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 간격 시간

입니다.

움직이는 영역 즉, 이미지가 왼쪽으로 넘어가는 부분을 추가한 것외에는 이전에 썼던 것과 동일합니다.

sliderWrap으로 전체를 감쌌기 때문에 나머지 선택자는 sliderWrap 안에서 querySelector 를 적용하면 됩니다.

script - javascript

sliderInner.style.transition = "all 0.6s";
setInterval(() => {
    	currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0 ...

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

transition 시간을 0.6 초로 정하고, setInerval() 메서드를 이용했습니다.

움직이는 영역을 뜻하는 sliderInner 를 X축 으로 -800 즉, 사진의 가로 크기만큼을 빼줍니다.

그렇게 하면 다음 사진이 보이게 됩니다.

script - GSAP

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

    gsap.to(sliderInner, {
        x : -800 * currentIndex,
        duration : 1,
        ease : "elastic.out(1, 0.3)"
    })
}, sliderInterval);

gsap 에서는 X축으로의 이동을 다음과 같이 표현합니다.

duration 은 지속되는 시간을 의미하고, GSAP는 ease 애니메이션 효과를 다양하게 쓸 수 있는 옵션을 제공해준다.

본 서비스에서는 Power0, Power1, Power2, Power3, Power4, Back, Elastic, Bounce, Rough, SlowMo, Stepped, Circ, Expo, Sine, Custom의 객체을 제공하고 있으며, 각각의 객체의 easeIn, easeOut, easeInOut 들은 각기 다른 결과를 보이게 된다.

script - jQuery

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

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

jquery 로는 다음과 같이 표현합니다.

$을 활용하면 선택자를 따로 만들지 않아도 적용할 수 있습니다.