CSS 텍스트 롤링 - CSS tegseuteu lolling

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <title>Real-time Rank</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        <script src="application.js" type="text/javascript"></script>
	<style type="text/css">		body {
    font-size: 12px;
    margin: 0;
}
#content {
    margin: 20px;
    padding: 10px;
    background: #d0e6f5;
}
#rank a {
    color: #FFF;
    text-decoration: none;
}



#rank a:hover {
 text-decoration: underline;
}
#rank {
 overflow: hidden;
 width: 160px;
 height: 20px;
 margin: 0;
}
#rank ul {
 position: relative;
 margin: 0;
}



#rank ol {
 position: absolute;
 top: 0;
 left: 0;
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#rank li {
 height: 20px;
 line-height: 20px;
}
</style>
 </head>
 <body>
 <div id="content">
 <div id="rank">
 <ul>
 <ol>
 <li><a href="#">1 순위</a></li>
 <li><a href="#">2 순위</a></li>
 <li><a href="#">3 순위</a></li>
 <li><a href="#">4 순위</a></li>
 <li><a href="#">5 순위</a></li>
 <li><a href="#">6 순위</a></li>
 <li><a href="#">7 순위</a></li>
 <li><a href="#">8 순위</a></li>
 <li><a href="#">9 순위</a></li>
 <li><a href="#">10 순위</a></li>
 </ol>
 </ul>
 </div>
 </div>
 </body>



 <script>
 $(function() {
 var count = $('#rank li').length;
 var height = $('#rank li').height();
 function step(index) {
 $('#rank ol').delay(2000).animate({
 top: -height * index,
 }, 500, function() {
 step((index + 1) % count);
 });
 }



 step(1);
});
</script>
</html>