jquery 부드럽게 흘러가는 marquee 효과 전광판

 

marquee

 

 

요즘 심심찮게 자주 쓰이는 marquee 효과다.

아주 간단했고, 쉽게 사용할 수 있다.

 

https://github.com/aamirafridi/jQuery.Marquee

GitHub - aamirafridi/jQuery.Marquee: jQuery plugin to scroll the text like the old traditional marquee

 

jquery 는 3.7.1 라이브러리를 사용했고

jquery.marquee.min.js 은 1.6.0 버전을 사용해서 만들었다.

 

html와 css는 아주 간단하게 짰다.

<div class='marquee'>
    Hello I'm 100a. This is my blog. welcome welcome.
</div>

.marquee {
  width: 100%;
  overflow: hidden;
  font-size:80px;
  font-weight:900;
}

 

그리고 js 소스다.

jQuery(".marquee").marquee({
    duration: 15000,
    gap: 50,
    delayBeforeStart: 0,
    direction: 'left',
    duplicated: true,
    startVisible: true
});

 

속성중에 

duration은 지속시간

gap은 복제되서 이어지는 다음 시작 사이간격이다.

gap

 

delayBeforeStart 는 애니메이션을 시작하기 전의 시간

direction 는 방향

duplicated는 흐름이 계속 되도록 복제 여부  true가 하겠다는 뜻

startVisible 처음부터 꽉 찬 상태로 시작할 수 있다.

아래 이미지는 startVisible를 false로 설정했을때이다.

startVisible : false