jQuery.marquee 텍스트 자동 롤링

안녕하세요 찐망고 입니다.

텍스트자동롤링 jQuery.marquee플러그인이 있어 살짝 가져와 봤어요.

 

<marquee> 태그라고 해서 텍스트나 이미지를 스크롤링하는 데 사용했었거든요.

그러나 이 태그는 웹표준과 웹접근성에 대한 요구 사항을 충족시키지 못하고 

사용자 경험을 저하시키는 등의 이유로 권장되지 안..

결국 HTML5 명세에서 폐기(deprecated)되었으며, 더 이상 사용하지 않게 되었죠..

 

물론 CSS나 Javascript를 사용하여 스크롤링을 구현하게 된 거고요.

 

너무 쉬어서 일단 포스팅해봅니다.

jquery.marquee

관련 플러그인과 쓰는 법이 나와있어요.

 

클래스를 지정하고

$('.marquee').marquee({
	//marquee 지속시간
	duration: 15000,
	//복제된 요소와의 간격
	gap: 50,
	//시작 delay시간
	delayBeforeStart: 0,
	//marquee방향
	direction: 'left',
	//요소 복제 여부
	duplicated: true
});

 

이렇게 적어주기만 하면 자동으로 롤링이 됩니다. ㅎㅎ

 

 

 

See the Pen 텍스트롤링 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

 

jQuery.marquee.js Option

옵션	옵션 설명
allowCss3Support	대상 브라우저가 CSS3 애니메이션을 지원하는 경우에도 jQuery의 animate 메서드 사용을 강제로 설정. 기본값은 true
css3easing	allowCss3Support가 true로 설정된 경우에 사용. 기본값은 'linear'
easing	jQuery 이징 플러그인이 필요. 기본값은 'linear'
delayBeforeStart	marquee가 애니메이션을 시작하기 전의 시간(밀리초). 기본값은 1000
direction	marquee가 애니메이션될 방향. 'left' / 'right' / 'up' / 'down'  기본값은 'left' 이것을 ltr/rtl 등으로 변경.
duplicated	텍스트가 컨테이너보다 짧을 때 연속적인 흐름 효과를 표시하기 위해  marquee를 복제해야 하는지 여부를 설정. 기본값은 false.
duration	요소가 이동할 시간(밀리초). 기본값은 5000.
speed	속도는 duration을 재정의. 속도는 컨테이너 요소의 너비와 상관없이 상대적으로 일정한 marquee 속도를 설정. 속도는 초당 픽셀로 측정.
gap	티커 사이의 간격(픽셀). duplicated 옵션이 true로 설정된 경우에만 작동. 기본값은 20. 참고: 여기서 20은 20픽셀을 의미
pauseOnHover	호버 상태에서 marquee를 일시 중지. 브라우저가 CSS3를 지원하고 allowCss3Support가 true로 설정된 경우, 이 작업은 CSS3를 사용하여 수행. 그렇지 않으면 jQuery Pause 플러그인을 사용하여 수행. 기본값은 false.
pauseOnCycle	사이클마다 delayBeforeStart 밀리초 동안 marquee를 일시 중지.
startVisible	true로 설정된 경우 marquee가 처음부터 보임