Bootstrap snippet and html example. news ticker

<div class="container">
    <div class="holder">
  <ul id="ticker01">
    	<li><a href="#">1 The first thing that most Javascript programmers</a></li>
		<li><a href="#">2 End up doing is adding some code</a></li>
		<li><a href="#">3 The code that you want to run</a></li>
		<li><a href="#">4 Inside of which is the code that you want to run</a></li>
		<li><a href="#">5 Right when the page is loaded</a></li>
		<li><a href="#">6 Problematically, however, the Javascript code</a></li>
		<li><a href="#">7 The first thing that most Javascript programmers</a></li>
		<li><a href="#">8 End up doing is adding some code</a></li>
		<li><a href="#">9 The code that you want to run</a></li>
		<li><a href="#">10 Inside of which is the code that you want to run</a></li>
	</ul>
</div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

body{margin-top:20px;}
.holder { 
  background-color:#ccc;
  width:300px;
  height:300px;
  overflow:hidden;
  padding:10px;
  font-family:Helvetica;
}
.holder .mask {
  position: relative;
  left: 0px;
  top: 10px;
  width:300px;
  height:290px;
  overflow: hidden;
}
.holder ul {
  list-style:none;
  margin:0;
  padding:0;
  position: relative;
}
.holder ul li {
  padding:10px 0px;
}
.holder ul li a {
  color:darkred;
  text-decoration:none;
}

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
		travelocity: 0.03
		}, settings);	
		
		return this.each(function(){
		var $strip = jQuery(this);
		$strip.addClass("newsticker")
		var stripHeight = 1;
		$strip.find("li").each(function(i){
			stripHeight += jQuery(this, i).outerHeight(true); // thanks to Michael Haszprunar and Fabien Volpi
		});
		
		var $mask = $strip.wrap("<div class='mask'></div>");
		var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");								
		var containerHeight = $strip.parent().parent().height();	//a.k.a. 'mask' width 	
		$strip.height(stripHeight);			
		var totalTravel = stripHeight;
		var defTiming = totalTravel/settings.travelocity;	// thanks to Scott Waye		
		function scrollnews(spazio, tempo){
		$strip.animate({top: '-='+ spazio}, tempo, "linear", function(){$strip.css("top", containerHeight); scrollnews(totalTravel, defTiming);});
		}
		
		scrollnews(totalTravel, defTiming);				
		$strip.hover(function(){
		jQuery(this).stop();
		},
		function(){
		var offset = jQuery(this).offset();
		var residualSpace = offset.top + stripHeight;
		var residualTime = residualSpace/settings.travelocity;
		scrollnews(residualSpace, residualTime);
		});			
		});	
};

$(function(){
    $("ul#ticker01").liScroll();
});