How to Create Vertical News Scroller in HTML, CSS, jQuery

Last updated Jul 9, 2019

As you have seen simple Vertical Scrolling News Ticker on many sites, it helps to display latest news about sites or events so that your site visitor get updated new changes about sites. So in this post I am going to show you how to create vertical news scroller in HTML, CSS, jQuery with little configuration the news ticker script written by Erick Arbe, You can customize below code snippet to fit your site look and feel and display your latest one line news on scroll when ever your site visitor click on that news a full page article display with detailed information.

Create Vertical News Scroller in HTML, CSS, jQuery

Libraries

Include latest jQuery library on page, because following script dependent on jQuery library.

<script src="//code.jquery.com/jquery-latest.min.js"></script>

HTML

Create simple unordered list inside news ticker div container and place your news headlines which need to scroll.

<div class="newsticker">
  <ul id="ticker01">
							<li><span>2/10/2017</span> - <a href="http://www.iamrohit.in/file-upload-in-nodejs-with-progress-bar/">FILE UPLOAD IN NODEJS WITH PROGRESS BAR</a></li>
							<li><span>10/10/2017</span> - <a href="http://www.iamrohit.in/angular-js-routing-and-templating-example/">ANGULAR.JS ROUTING AND TEMPLATING EXAMPLE</a></li>
							<li><span>5/10/2017</span><a href="http://www.iamrohit.in/how-to-integrate-paypal-payment-gateway-in-nodejs/">HOW TO INTEGRATE PAYPAL PAYMENT GATEWAY IN NODEJS</a></li>
							<li><span>08/6/2017</span> - <a href="http://www.iamrohit.in/how-to-send-email-in-nodejs/">HOW TO SEND EMAIL IN NODEJS</a></li>
							<li><span>08/10/2017</span> - <a href="http://www.iamrohit.in/simple-oops-based-login-and-registration-script-in-php-and-mysql/">SIMPLE OOPS BASED LOGIN AND REGISTRATION SCRIPT IN PHP AND MYSQL</a></li>
							<li><span>2/10/2017</span> - <a href="http://www.iamrohit.in/file-upload-in-nodejs-with-progress-bar/">FILE UPLOAD IN NODEJS WITH PROGRESS BAR</a></li>
							<li><span>10/10/2017</span> - <a href="http://www.iamrohit.in/angular-js-routing-and-templating-example/">ANGULAR.JS ROUTING AND TEMPLATING EXAMPLE</a></li>
							<li><span>5/10/2017</span><a href="http://www.iamrohit.in/how-to-integrate-paypal-payment-gateway-in-nodejs/">HOW TO INTEGRATE PAYPAL PAYMENT GATEWAY IN NODEJS</a></li>
							<li><span>08/6/2017</span> - <a href="http://www.iamrohit.in/how-to-send-email-in-nodejs/">HOW TO SEND EMAIL IN NODEJS</a></li>
							<li><span>08/10/2017</span> - <a href="http://www.iamrohit.in/simple-oops-based-login-and-registration-script-in-php-and-mysql/">SIMPLE OOPS BASED LOGIN AND REGISTRATION SCRIPT IN PHP AND MYSQL</a></li>
							<li><span>2/10/2017</span> - <a href="http://www.iamrohit.in/file-upload-in-nodejs-with-progress-bar/">FILE UPLOAD IN NODEJS WITH PROGRESS BAR</a></li>
							<li><span>10/10/2017</span> - <a href="http://www.iamrohit.in/angular-js-routing-and-templating-example/">ANGULAR.JS ROUTING AND TEMPLATING EXAMPLE</a></li>
							<li><span>5/10/2017</span><a href="http://www.iamrohit.in/how-to-integrate-paypal-payment-gateway-in-nodejs/">HOW TO INTEGRATE PAYPAL PAYMENT GATEWAY IN NODEJS</a></li>
							<li><span>08/6/2017</span> - <a href="http://www.iamrohit.in/how-to-send-email-in-nodejs/">HOW TO SEND EMAIL IN NODEJS</a></li>
							<li><span>08/10/2017</span> - <a href="http://www.iamrohit.in/simple-oops-based-login-and-registration-script-in-php-and-mysql/">SIMPLE OOPS BASED LOGIN AND REGISTRATION SCRIPT IN PHP AND MYSQL</a></li>
 
 
				</ul>
</div>

CSS

Add style sheet on page for styling news ticker background and news heading etc.

<style>
.newsticker { 
  background-color:#ccc;
  width:300px;
  height:250px;
  overflow:hidden;
  padding:10px;
  font-family:Helvetica;
}
.newsticker .mask {
  position: relative;
  left: 0px;
  top: 10px;
  width:300px;
  height:240px;
  overflow: hidden;
}
.newsticker ul {
  list-style:none;
  margin:0;
  padding:0;
  position: relative;
}
.newsticker ul li {
  padding:10px 0px;
}
.newsticker ul li a {
  color:darkred;
  text-decoration:none;
}
</style>

JS

Finally add js function on page to make your news scrollable and stop news scroller on mouse over.

<script>
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();
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Bootstrap CSS How to Create Vertical News Scroller HTML