Slider Effect 04 - 왼쪽으로 연속적으로 움직이기에 대해서 알아보자

javascript

 sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

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

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

    setInterval(sliderEffect, sliderInterval);

appendChild는 JavaScript에서 DOM(Document Object Model) 요소를 다룰 때, 부모 노드에 자식 노드를 추가하는 메서드입니다.
appendChild 메서드를 사용하여 새로운 요소를 추가할 수 있기 때문에, 동적인 웹 페이지를 구성하는 JavaScript 코드에서는 자주 사용됩니다.

gsap

gsap.registerPlugin(TweenMax);

function sliderEffect(){
  currentIndex++;
  
  TweenMax.to(sliderInner, 0.6, {x: -sliderWidth * currentIndex, ease: Power2.easeInOut});
  
  //마지막 이미지에 위치했을 때
  if(currentIndex == sliderCount){
    setTimeout(() => {
      TweenMax.to(sliderInner, 0, {x: 0});
    }, 700);
    currentIndex = 0;
  }
}

setInterval(sliderEffect, sliderInterval);

gsap.registerPlugin() 함수를 사용하여 TweenMax 플러그인을 등록합니다.

sliderEffect() 함수는 주기적으로 실행됩니다. 

currentIndex 값을 1 증가시키고, TweenMax.to() 함수를 사용하여 sliderInner 객체의 위치를 변경합니다. 

x 속성을 사용하여 해당 객체를 왼쪽으로 이동시킵니다. 

이때, Power2.easeInOut easing 함수를 사용하여 자연스러운 이동효과를 부여합니다.

if 문에서는 currentIndex와 sliderCount가 같아졌을 때, 마지막 이미지에 위치하게 됩니다. 

이 때, setTimeout() 함수를 사용하여 0.7초 뒤에 실행되는 함수 내부에서 TweenMax.to() 함수를 사용하여 sliderInner 객체의 위치를 초기화합니다. currentIndex도 0으로 초기화합니다.

setInterval() 함수를 사용하여 sliderEffect() 함수를 일정 주기로 실행합니다. 

이때, sliderInterval은 이미지 전환 간격으로 설정합니다.

위 코드에서 주요한 차이점은, TweenMax.to() 함수에 전달하는 첫 번째 인자로 sliderInner 객체를 바로 사용한다는 것입니다. 

이를 통해, jQuery를 사용하지 않고도 GSAP을 이용하여 원하는 애니메이션 효과를 구현할 수 있습니다. 

또한, onComplete 옵션을 사용하지 않고, 대신 setTimeout() 함수를 이용하여 처리합니다.

jquery

// sliderInner 변수에 해당하는 jQuery 객체 생성
var $sliderInner = $(sliderInner);

// sliderClone 변수에 해당하는 jQuery 객체 생성
var $sliderClone = $(sliderClone);

// sliderInner에 sliderClone을 추가
$sliderInner.append($sliderClone);

function sliderEffect(){
currentIndex++;

$sliderInner.css({
    transition: "all 0.6s",
    transform: "translateX(-"+ sliderWidth * currentIndex +"px)"
});

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

setInterval(sliderEffect, sliderInterval);

$(selector) 함수를 사용하여 sliderInner과 sliderClone을 각각 jQuery 객체로 변환합니다.

append() 함수를 사용하여 $sliderClone 객체를 $sliderInner 객체의 자식으로 추가합니다.

$sliderInner 객체의 스타일을 설정할 때 css() 함수를 사용합니다.
$sliderInner 객체의 스타일 속성은 객체 형태로 전달합니다.

setTimeout() 함수 내부에서 사용하는 this 대신 화살표 함수를 사용하여 sliderInner 변수의 스코프를 유지합니다.