In this tutorial, how to create a breaking news ticker HTML code and stylish looks and delay vertical scrolls text. 
 
 
Breaking News Ticker HTML Code

 
The breaking news ticker is used to display headlines for the latest news on a webpage and it scrolls from bottom to top
 
Create an HTML and CSS use keyframes for animation and the use of animation makes infinite scroll on the full-width bar.

Breaking News Ticker HTML Code


Here, I present ticker helps of wrap <li> items vertical instead of a horizontal line. 
 
In the horizontal ticker, it continuously scrolls and we have to wait for a long scroll but in the vertical, the news is separate and easy to read news or post.


Read Also:





Breaking News Ticker HTML:


  
<div class="container-fluid py-5">
<div class="row">
<div class="col-md-12">
<div class="d-flex justify-content-between bg-white white">
<div class="d-flex justify-content-center bg-primary py-2 text-white px-1 news">
<span class="d-flex align-items-center">News Update:</span>
</div>
<ul class="scroll" >
<li>
<span class="dot"></span> 
<a href="#">Hardik Pandya bowls at high speed in 1st match as Gujarat Titans captian</a> 
</li>
<li>
<span class="dot"></span> 
<a href="#">Will Smith-Chris Rock’s punch drama aside, why Oscars 2022 made Twitter cringe </a> 
</li>
<li>
<span class="dot"></span> 
<a href="#">Sensex rises 230 points, Nifty up at 17,222 | List of top gainers</a> 
</li>
</ul>
</div>
</div>
</div>
</div>  
  
  


Here, CSS keyframes start from 0% to end with 100% and my <li> items are three .so, am use keyframes 0%,35%70%,100%, and again it starts from the top of the news.


Style:


  
<style>
body {
    background: #eee
}

.news {
    width: 260px;
	border-radius:0px 10px 10px 0px; 
	display:flex;
	position: relative;
	overflow: hidden;
}
.white
{
    height:40px;
    overflow:hidden;
}

.scroll{
	display: flex;
	flex-wrap: wrap;
	margin:0;
	padding: 0;
	z-index: 999;
	animation:vertical-up 5s ease-in-out infinite;
}
.scroll li
{
    list-style: none;
    display: flex;
	width: 100%;
	line-height: 34px;
	align-items: center;
	padding-left: 25px;
}

.scroll li a {
    text-decoration: none;
	color:#323232;
	font-weight:700;
	
}
.scroll a:hover
 {
	color:#0d6efd;
}

.scroll:hover{animation-play-state: paused; }
.dot {
    height: 7px;
    width: 7px;
    margin-left: 3px;
    margin-right: 3px;
    background-color: rgb(207, 23, 23);
    border-radius: 50%;
    display: inline-block;
}

@keyframes vertical-up 
{
    0%   {margin-top: 0;}
	35%  {margin-top: -30px;}
	70%  {margin-top: -60px;}
	100% {margin-top: 0;}
	
}
</style>
  
  


Breaking News Ticker HTML Code

1 Comments

Post a Comment

Previous Post Next Post