리스트 롤링 만들기

리스트가 순차적으로 롤링되는 코드입니다.

 

<div id="wrap">
  <h1>롤링 리스트</h1>
  <div id="roll">
    <ul>
      <li>리스트11111111111111</li>
      <li>리스트22222222222222</li>
      <li>리스트3333333333333333</li>
      <li>리스트4444444444444</li>
      <li>리스트5555555555555</li>
      <li>리스트6666666665</li>
      <li>리스트777777777</li>
      <li>리스트88888888</li>
      <li>리스트999999999</li>
    </ul>
  </div>
</div>

 

ul,
li {
  margin: 0;
  padding: 0;
}

#wrap {
  padding: 50px 100px;
  background: gold;
  width: 600px;
}

#roll {
  background: #fff;
  border: 1px solid red;
  height: 350px;
  overflow: hidden;
}

#roll ul {
  position: relative;
}

#roll li {
  border-bottom: 1px solid #333;
  height: 70px;
}

 

var rollUl = $('#roll').find('ul');
var li = $('#roll').find('li');
var liLeng = li.length;
var liHeight = li.outerHeight();
var _index = 0;
var i = 1;

setInterval(function() {
  TweenMax.to(rollUl, 0.5, {
    top: -(liHeight),
    ease: Expo.easeInOut,
    onComplete: topReturn
  });
}, 2000)

function topReturn() {
  var liFirst = $('#roll').find('li:first');
  var liLast = $('#roll').find('li:last');
  rollUl.css({
    'top': 0
  });
  liFirst.insertAfter(liLast);
}

 

jsfiddle로 보기

https://jsfiddle.net/hyuckjin/ovpnm3a8/