{"id":5524,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=5524"},"modified":"2024-01-22T14:45:13","modified_gmt":"2024-01-22T09:45:13","slug":"breaking-news-ticker-html-code","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/breaking-news-ticker-html-code\/","title":{"rendered":"Breaking News Ticker HTML Code with Demo"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

This news ticker scrolls the text up\/down only. If you want to create horizontal scrolling check this news ticker plugin<\/a>.<\/p>\n

How to Create Breaking News Ticker in HTML<\/h2>\n

1. Create a div element with a class name \"news\"<\/code> and place an unordered list of news links inside it.<\/p>\n

<div class=\"news red full-width\">\n\t<span>Breaking News<\/span>\n\t<ul class=\"scrollLeft\">\n    <li><a href=\"#\">Text 1 - Short Description<\/a><\/li>\n    <li><a href=\"#\">Text 2 - Short Description<\/a><\/li>\n    <li><a href=\"#\">Text 3 - Short Description<\/a><\/li>\n    <li><a href=\"#\">Text 4 - Short Description<\/a><\/li>\n\t<\/ul>\n<\/div>\n<\/pre>\n
2. After that, style the news ticker using the following CSS.<\/p>\n
.news {\n  box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);\n  width: 350px;\n  height: 30px;\n  margin: 20px auto;\n  overflow: hidden;\n  border-radius: 4px;\n  padding: 3px;\n  -webkit-user-select: none\n} \n.full-width{\n    width: 100%;\n}\n.news span {\n  float: left;\n  color: #fff;\n  padding: 6px;\n  position: relative;\n  top: 1%;\n  border-radius: 4px;\n  box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);\n  font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -webkit-user-select: none;\n  cursor: pointer\n}\n\n.news ul {\n  float: left;\n  padding-left: 20px;\n  animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;\n  -webkit-user-select: none\n}\n\n.news ul li {line-height: 30px; list-style: none }\n\n.news ul li a {\n  color: #fff;\n  text-decoration: none;\n  font: 14px Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -webkit-user-select: none\n}\n<\/pre>\n
3. Define the CSS keyframes to animated the news ticker’s items.<\/p>\n
@keyframes ticker {\n\t0%   {margin-top: 0}\n\t25%  {margin-top: -30px}\n\t50%  {margin-top: -60px}\n\t75%  {margin-top: -90px}\n\t100% {margin-top: 0}\n}\n<\/pre>\n
4. Use the CSS animation-play-state property<\/a> in order to pause the news ticker on hover event.<\/p>\n
.news ul:hover { animation-play-state: paused }\n.news span:hover+ul { animation-play-state: paused }\n<\/pre>\n
5. Finally, define color classes for the breaking news ticker and done.<\/p>\n
\/* OTHER COLORS *\/\n.blue { background: #347fd0 }\n.blue span { background: #2c66be }\n.red { background: #d23435 }\n.red span { background: #c22b2c }\n.green { background: #699B67 }\n.green span { background: #547d52 }\n.magenta { background: #b63ace }\n.magenta span { background: #842696 }\n.yellow {background : yellow}\n.yellow span {background : yellow}\n<\/pre>\n
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.<\/p>\n\n\n
Connect with us on social media:<\/p>\n\n\n\n