업다운 상하 롤링 스크립트 vticker롤링

업앤다운 롤링은 이미 예전에 포스팅했었지만

https://moo-you.tistory.com/108

 

이 경우에는 슬라이드 될 항목들이 올라가다가 끝에 다다르면 다시 내려오는 형태이다

반면에 이번에 소개할 스크립트는 제일 위에 항목이 보여지는 영역 밖으로 나가면 항목 제일 밑으로 이동하게 된다.

 

그래서 이번에는 vticker롤링 스크립트를 사용한 업다운 롤링이다.

 

http://richhollis.github.io/vticker/

vTicker

 

여기서 다운받아서 사용할 수 있다.

 

html

<div id="example">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
  </ul>
</div>

자바스크립트

$(function() {
  $('#example').vTicker();
});

 

이런 식으로 사용할 수 있고 vTicker 스크립트 제어 방법은

Methods에 나와있다.

 

$('#example').vTicker({showItems: 10, padding: 2, pause:2000});

이런식으로 사용할 수 있다.

speed는 움직이는 속도이고

pause는 멈춰있는 시간

showItems 보여지는 항목수

autoAppend는 목록이 반복되도록 하기 위해서 항목을 자동으로 추가해주는 기능이다.