자바스크립트 전광판 기능 - Marquee 효과 커스텀 (Vanilla JS Marquee)

자바스크립트 (JavaScript)

 

자바스크립트 전광판 기능 - Marquee 효과 커스텀 (Vanilla JS Marquee) 예제입니다.

함수로 짜서 파라미터에 인자를 넣어서 사용할 수 있도록 만들었습니다.

---

 

See the Pen 바닐라 자바스크립트 Marquee 효과 (Vanilla JS Marquee) by kimyangsun (@kimyangsun) on CodePen.

// Marquee 커스텀 함수 : 파라미터는 (선택자, 속도, 방향전환 여부)
function Marquee(selector, speed, reverse) {
  const parentSelector = document.querySelector(selector); // 클래스명을 인자로 받은 매개변수
  const clone = parentSelector.innerHTML; // 해당 클래스 엘리먼트의 html 값을 clone으로 선언
  const firstElement = parentSelector.firstElementChild;
  let i = 0;
  // console.log(firstElement);
  parentSelector.insertAdjacentHTML('beforeend', clone);
  parentSelector.insertAdjacentHTML('beforeend', clone);
  
  if (reverse) parentSelector.classList.add('reverse');
  
  const moveItem = () => {
    if (reverse) {
      firstElement.style.marginRight = `-${i}px`;
    } else {
      firstElement.style.marginLeft = `-${i}px`;
    }
    if (i > firstElement.clientWidth) i = 0;
    i += speed;
    requestAnimationFrame(moveItem);
  }
  requestAnimationFrame(moveItem); // 움직임을 계속해서 주기 위해 requestAnimationFrame 사용
}

// 윈도우 로드되면 해당 함수 실행
window.addEventListener('load', function(){
  Marquee('.marquee1', 2, false);
  Marquee('.marquee2', 2, true);
});