Breaking News Ticker HTML Code with Demo

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>
	</ul>
</div>

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
} 
.full-width{
    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.

/* OTHER COLORS */
.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.

Connect with us on social media:

• https://gab.com/codehim
• https://portfolium.com/codehimcom
• https://audiomack.com/codehim

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.