A news ticker is one of the useful elements on a webpage to navigate the site’s content. It automatically scrolls the list of links in the horizontal or vertical directions. The movements of these links attract the user’s attention and give them a quick link to newly added content. This tutorial explains how to create a vertical scrolling news ticker using HTML and CSS.
Basically, the news ticker may contain links to featured posts or the latest added content on a website. It is not limited to implementing a news ticker on a news or magazine webpage. You can integrate on any online portal to allow users to navigate your site through a news ticker. So, the main purpose of a news ticker is to attract the user’s attention without the inconvenience of scrolling.
Before getting started with coding, have a look at a quick video preview. You can also browse the demo page to see the auto vertical scrolling effect in action.
Video Preview
The background color, links size and color can be customized according to your needs. So, let’s get started with HTML to create a news ticker.
The HTML for Vertical Scrolling News Ticker
In HTML, create a ul element with a unique id "news-alerts" and a class name "news-alert-list". Inside the ul, place your news/posts links, wrap all these elements into a div tag, and define its class name "news-alerts holder".
<div class="news-alerts holder">
<ul id="news-alerts" class="news-alert-list">
<li><a href="#">The first thing that most Javascript programmers</a></li>
<li><a href="#">End up doing is adding some code</a></li>
<li><a href="#">The code that you want to run</a></li>
<li><a href="#">Inside of which is the code that you want to run</a></li>
<li><a href="#">Right when the page is loaded</a></li>
<li><a href="#">Problematically, however, the Javascript code</a></li>
<li><a href="#">The first thing that most Javascript programmers</a></li>
<li><a href="#">End up doing is adding some code</a></li>
<li><a href="#">The code that you want to run</a></li>
<li><a href="#">Inside of which is the code that you want to run</a></li>
<li><a href="#">Right when the page is loaded</a></li>
<li><a href="#">Problematically, however, the Javascript code</a></li>
</ul>
</div>
Place the above HTML structure where you want to display a vertical scrolling news ticker. You can also place images/thumbnails or other HTML elements along with the links.
The CSS Styles
The "news-alerts" is the container class for the news ticker. Select it in CSS and define the background, color max-width, margin, and padding property. Here, the essential things to consider are height and overflow property.
We need a fixed height with hidden overflow in which the news content can be scrolled. So, specify 300px height and set the hidden value for overflow. Besides this, you can set a border and additional CSS for this container in order to customize it according to your needs.
.news-alerts {
background: #8E0E00; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1F1C18, #8E0E00); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1F1C18, #8E0E00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
width: 100%;
max-width: 720px;
margin: 10px auto;
height: 300px;
padding: 15px;
overflow: hidden;
background-color: #fff;
border: 1px solid #ccc;
font-family: "Archivo", sans-serif;
}
After that, select the ul element of the "news-alerts" class and define the none value for the list-style property to remove the list bullets. Likewise, define the 0 value for the margin and padding to remove the default spacing. As we want to animate list items, so define the relative position,
.news-alerts ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
Similarly, target the li element with reference to ul and new-alerts class. Define 10px 0px value for the padding property to leave some space from the top and bottom of the list items.
.news-alerts ul li {
padding: 10px 0px;
}
Now, target the hyperlinks (the a tag of li that child element of ul and news-alerts class). Define the color and font size according to your needs. In order to remove the default link underline, use the CSS text-decoration property with none value.
.news-alerts ul li a {
color: rgba(255, 255, 255, 0.80);
font-size: 18px;
text-decoration: none;
}
In the same way, target the a element with the hover pseudo-selector and define color and text decoration as follows:
.news-alerts ul li a:hover {
color: rgba(255, 255, 255, 1);
text-decoration: underline;
}
Scrolling News Ticker JS Function
After creating the HTML for the news ticker and styling it with CSS, now it’s time to functionalize it with JavaScript. To do so, we’ll use the jQuery (a JavaScript library) and a vertical scrolling news ticker function. So, load the jQuery by adding the following CDN link before closing the body tag.
<!-- jQuery --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Finally, include the following jQuery "liScroll" function between the <script> and </script> tag after the above CDN link.
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#news-alerts").liScroll();
});
That’s all! I hope, you have successfully created a vertical scrolling news ticker in your HTML project. If you have any questions or suggestions, let me know by comment below. Happy coding 😊
