Breaking News Ticker HTML Code with Demo

Breaking News Ticker HTML Code with Demo
Code Snippet:CSS3 News Ticker
Author: Joemari Paduhilao
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 40,710
License: MIT
Edit Code online: View on CodePen
Read More

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:

2 thoughts on “Breaking News Ticker HTML Code with Demo”

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X