Breaking News Ticker HTML Code with Demo

Breaking News Ticker HTML Code with Demo
Code Snippet: CSS3 News Ticker
Author: Joemari Paduhilao
Official website: Go to website
Published: 1 week ago
Views: 140

This lightweight CSS3 code snippet helps you to create a breaking news ticker in your HTML web project. It creates a stylish news ticker and scrolls text vertically after a certain delay time.

You can use this news ticker to display headlines of the latest news, posts, or products on a webpage. You can easily customize the background color by adding a color class. Similarly, you can set class for full-width or half-width of news bar.

This news ticker scrolls the text up/down only. If you want to create horizontal scrolling check this news ticker plugin.

How to Create Breaking News Ticker in HTML

1. Create a div element with a class name "news" and place an unordered list of news links inside it.

<div class="news red full-width">
	<span>Breaking News</span>
	<ul class="scrollLeft">
    <li><a href="#">Text 1 - Short Description</a></li>
    <li><a href="#">Text 2 - Short Description</a></li>
    <li><a href="#">Text 3 - Short Description</a></li>
    <li><a href="#">Text 4 - Short Description</a></li>

2. After that, style the news ticker using the following CSS.

.news {
  box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
  width: 350px;
  height: 30px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 4px;
  padding: 3px;
  -webkit-user-select: none
    width: 100%;
.news span {
  float: left;
  color: #fff;
  padding: 6px;
  position: relative;
  top: 1%;
  border-radius: 4px;
  box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
  font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  cursor: pointer

.news ul {
  float: left;
  padding-left: 20px;
  animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
  -webkit-user-select: none

.news ul li {line-height: 30px; list-style: none }

.news ul li a {
  color: #fff;
  text-decoration: none;
  font: 14px Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none

3. Define the CSS keyframes to animated the news ticker’s items.

@keyframes ticker {
	0%   {margin-top: 0}
	25%  {margin-top: -30px}
	50%  {margin-top: -60px}
	75%  {margin-top: -90px}
	100% {margin-top: 0}

4. Use the CSS animation-play-state property in order to pause the news ticker on hover event.

.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }

5. Finally, define color classes for the breaking news ticker and done.

.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #d23435 }
.red span { background: #c22b2c }
.green { background: #699B67 }
.green span { background: #547d52 }
.magenta { background: #b63ace }
.magenta span { background: #842696 }
.yellow {background : yellow}
.yellow span {background : yellow}

That’s all! hopefully, you have successfully integrated this breaking news ticker HTML code into your project. If you have any questions or suggestions, let me know by comment below.

Be the first to comment

Leave a Reply

Your email address will not be published.


five + eight =

This site uses Akismet to reduce spam. Learn how your comment data is processed.