marquee.js 사용해보기 (jQuery 플러그인)

gsap 연습할 겸 요즘 클론코딩을 자주하고있는데 처음보는 플러그인이 있어서 사용법을 기록해보려한다!

 

클론할 사이트는 랜딩페이지로 

https://vibe.naver.com/about/

VIBE

 

vibe 서비스의 어바웃 페이지다.

 

요렇게 전광판 효과?로 플레이리스트를 추천하는 부분이다.

CSS로만 구현해야하나 싶었는데 마침 jQuery 플러그인이 있어서 사용해볼려한다.

 

marquee.js

Marquee.js는 HTML 요소를 효과적으로 스크롤하도록 도와주는 JavaScript 라이브러리 중 하나입니다. 이를 사용하여 웹 페이지에서 텍스트나 이미지를 자동으로 스크롤하거나 특정 동작에 따라 스크롤할 수 있습니다.

 

👀 사용법

Marquee.js 라이브러리 추가

<script src="https://cdn.jsdelivr.net/npm/marquee.js"></script>

 

구조

 <div class="recommend_list">
  <ul class="marquee">
    <li class="big">
      <a href="javascript:">
        <img
          src="https://music-phinf.pstatic.net/20230829_24/1693298073563Wv2OV_JPEG/%BF%A9%C0%DA_%BE%C6%C0%CC%B5%B9_%B7%B9%C0%FC%B5%E5_%B5%A5%BA%DF%B0%EE.jpg?type=r480"
          alt=""
        />
      </a>
      <a href="javascript:">
        <h5>여돌 데뷔곡 추천😍</h5>
      </a>
      <p>VIBE</p>
    </li>
    <li class="small">
      <a href="javascript:">
        <img
          src="https://music-phinf.pstatic.net/20210831_105/1630378811575cdylt_PNG/VIBE_%B1%B9%B3%BB%B4%ED%BD%BA_%B5%CE%B5%D2%C4%A9%BA%B8%C0%CC%B1%D7%B7%EC.png?type=r480"
          alt="추천 플리 표지"
        />
      </a>
      <a href="javascript:">
        <h5>두둠칫 남돌 플리🎧</h5>
      </a>
      <p>VIBE</p>
    </li>
  </ul>
</div>

 

ul에 marquee 라는 class를 붙이고 안쪽 li요소들을 짜주었다.

이미지랑 제목 아티스트 정도로 구성!

 

스크립트

let marquee = $(".marquee").marquee({
    duration: 25000,
    delayBeforeStart: 500,
    direction: "left",
    startVisible: true,
    duplicated: true,
    gap: 0,
});

 

공식 깃헙에 가면 옵션들이 있는데 gpt한테 번역해달라해야징

 

marquee.js 옵션

 

• allowCss3Support: 대상 브라우저가 CSS3 애니메이션을 지원하더라도 jQuery의 animate 메서드를 강제로 사용하도록 설정합니다. 기본값은 true
• css3easing: CSS3 애니메이션의 easing(이징)을 설정한다. allowCss3Support가 true로 설정된 경우 작동!
• easing: jQuery 이징 플러그인이 필요합니다. 기본값은 'linear'입니다.
• delayBeforeStart: marquee가 애니메이션을 시작하기 전에 대기하는 시간(밀리초)을 설정합니다. 기본값은 1000(1초)입니다.
• direction: marquee가 애니메이션하는 방향을 설정합니다. 'left' / 'right' / 'up' / 'down' 중 선택할 수 있습니다. 기본값은 'left'입니다.
• duplicated: 텍스트가 컨테이너보다 짧은 경우 연속적인 흐름의 효과를 나타내기 위해 marquee를 복제해야 하는지 여부를 설정합니다. 기본값은 false입니다.
• duration: 요소가 이동하는 데 걸리는 시간(밀리초)을 설정합니다. 기본값은 5000(5초)입니다.
• speed: 속도는 duration을 재정의합니다. speed를 사용하면 컨테이너의 너비에 관계없이 비교적 일정한 marquee 속도를 설정할 수 있습니다. 속도는 초당 픽셀로 측정됩니다.
• gap: 티커 간의 간격(픽셀)을 설정합니다. duplicated 옵션이 true로 설정된 경우에만 작동합니다. 기본값은 20입니다.
• pauseOnHover: 호버시 marquee를 일시 중지합니다. 브라우저가 CSS3를 지원하고 allowCss3Support가 true로 설정된 경우 이는 CSS3를 사용하여 수행됩니다. 그렇지 않으면 jQuery Pause 플러그인을 사용하여 수행됩니다. 기본값은 false입니다.
• pauseOnCycle: 사이클마다 marquee를 delayBeforeStart 밀리초 동안 일시 중지합니다.
• startVisible: 시작부터 marquee가 보이도록 설정합니다. true로 설정된 경우 시작부터 marquee가 보입니다.

그래서 내가 쓴 속성은

 

1. duration: 25000: Marquee의 한 사이클(애니메이션의 완료까지)에 걸리는 시간을 밀리초 단위로 설정합니다. 이 경우 25000밀리초로 설정되어 있으므로 25초 동안 한 번의 애니메이션이 발생합니다.
2. delayBeforeStart: 500: Marquee 애니메이션이 시작하기 전에 대기하는 시간을 설정합니다. 이 경우 500밀리초로 설정되어 있으므로 0.5초 동안 대기한 후에 애니메이션이 시작됩니다.
3. direction: "left": Marquee의 애니메이션 방향을 설정합니다. 이 경우 "left"로 설정되어 있으므로 텍스트나 요소가 왼쪽으로 스크롤됩니다.
4. startVisible: true: Marquee가 시작부터 화면에 보이도록 설정합니다. 따라서 페이지가 로드되면 Marquee가 바로 표시됩니다.
5. duplicated: true: Marquee가 텍스트 또는 요소가 컨테이너보다 짧을 때 연속적인 흐름의 효과를 나타내기 위해 복제되어야 하는지 여부를 설정합니다. 이 경우 true로 설정되어 있으므로 텍스트가 컨테이너보다 짧으면 흐름을 연속적으로 유지하기 위해 Marquee가 복제됩니다.
6. gap: 0: Marquee 흐름 사이의 간격을 설정합니다. 이 경우 0으로 설정되어 있으므로 티커 간의 간격이 없습니다.

이렇게 설명할 수 있따.

gap을 0으로 한 이유는 이미 css에서 li마다 마진을 줬기 때문! 

스타일링을 안 했으면 상관없다.

 

플레이, 정지 버튼

그리고 marquee.js에는 몇 가지 메서드가 있는데

1. pause: 언제든지 Marquee를 일시 중지합니다.
2. resume: 이전에 일시 중지된 Marquee를 다시 시작합니다.
3. toggle: 일시 중지된 Marquee를 다시 시작하거나, 이미 실행 중인 Marquee를 일시 중지합니다.
4. destroy: Marquee를 요소에서 제거합니다. 이 메서드는 데이터를 Ajax로 로드하거나 다른 문자열을 사용하는 경우 유용합니다. 특정 데이터를 표시한 후 Marquee를 제거하고 HTML을 변경한 다음 플러그인을 다시 적용할 수 있습니다. 자세한 내용은 데모 페이지를 참조하십시오.

이걸 활용해서 플레이, 정지를 해볼 거다.

<a href="javascript:" class="pause icon"></a>
<a href="javascript:" class="play icon"></a>

 

플레이와 정지버튼을 만들 거라서 작업해주었다.

play버튼은 css에서 opacity를 0으로 설정해줬다.

// pause 버튼 클릭 이벤트 핸들러
$(".pause").click(function () {
    marquee.marquee("pause");
    marqueePaused = true;
    $(".pause").hide();
    $(".play").show();
});

// play 버튼 클릭 이벤트 핸들러
$(".play").click(function () {
    marqueePaused = false;
    marquee.marquee("resume");
    $(".pause").show();
    $(".play").hide();
});

 

pause버튼 눌렀을 땐 marquee의 pause메서드를 사용하고

play 버튼 눌렀을 땐 marquee의 resume 메서드를 사용했다.

그리고 show hide로 버튼 감췄다 나타났다 하는 것도 잊지않긔

 

mouse over 이벤트

$(".marquee").mouseenter(function () {
    if (!marqueePaused) {
      marquee.marquee("pause");
    }
});

$(".marquee").mouseleave(function () {
    if (!marqueePaused) {
      marquee.marquee("resume");
    }
});

 

기존의 marquee 속성중에 pauseOnHover 속성이 있길래 그걸로 사용했는데 정상 작동을 했다.

근데 문제는... 정지 플레이 버튼이 생기면서 정지했을 때도 마우스 오버했다 떼면 다시 슬라이드 되기 때문에 그냥

jQuery로 짰다. mouseenter와 mouseleave 이벤트를 통해 pause resume을 각각 적용시켰다. 적용시키니 정지상태에서 마우스 오버했다 떼도 그대로 정지한 것을 확인할 수 있었다!

 

 

완성된 기능!

https://codepen.io/YeoDaSeul4355/pen/KKYmpNR

marquee.js