<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>News Section</h1>
<div class="holder">
<ul id="ticker01">
<li><span>10/10/2007</span><a href="#">The first thing that most Javascript programmers</a></li>
<li><span>10/10/2007</span><a href="#">End up doing is adding some code</a></li>
<li><span>10/10/2007</span><a href="#">The code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#">Inside of which is the code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#">Right when the page is loaded</a></li>
<li><span>05/10/2007</span><a href="#">Problematically, however, the Javascript code</a></li>
<li><span>04/10/2007</span><a href="#">The first thing that most Javascript programmers</a></li>
<li><span>04/10/2007</span><a href="#">End up doing is adding some code</a></li>
<li><span>04/10/2007</span><a href="#">The code that you want to run</a></li>
<li><span>03/10/2007</span><a href="#">Inside of which is the code that you want to run</a></li>
<li><span>03/10/2007</span><a href="#">Right when the page is loaded</a></li>
<li><span>01/10/2007</span><a href="#">Problematically, however, the Javascript code</a></li>
</ul>
</div>
</div>
</div>
</div>
.holder {
background-color:#ccc;
overflow:hidden;
padding:10px;
font-family:Helvetica;
}
.holder .mask {
position: relative;
left: 0px;
top: 10px;
height:240px;
overflow: hidden;
}
.holder ul {
list-style:none;
margin:5px;
padding:0;
position: relative;
}
.holder ul li {
padding:10px 10px;
}
.holder ul li a {
color:darkred;
text-decoration:none;
}
jQuery.fn.liScroll = function(settings) {
settings = jQuery.extend({
travelocity: 0.005
}, 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();
});
