Create 3 Types of Horizontal and Vertical News Ticker Only With HTML & CSS

A news ticker is a bar that displays the latest news and events. In terms of its placement, it can be either Horizontal or Vertical. In this tutorial, we will see how we create a horizontal and Vertical news ticker using just CSS?

First of all, you just need to create a full-width fixed bar in CSS and apply this code to it. Let’s learn newsticker code.

Create 3 Types of Horizontal and Vertical News Ticker Only With HTML & CSS

News Ticker Demo

Please take a look at the ‘demo’ page first for this news ticker.

Horizontal News Ticker

Horizontal news ticker

A horizontal news ticker is the most basic type of news ticker. But we will not use any JavaScript in our code. So let’s check the HTML structure first.

<div class="ticker-wrapper-h">
	<div class="heading">Trending Now</div>
	
	<ul class="news-ticker-h">
		<li><a href="">What is Lorem Ipsum?</a></li>
		<li><a href="">Why do we use it?</a></li>
		<li><a href="">Where does it come from?</a></li>
		<li><a href="">Where can I get some?</a></li>
	</ul>
</div>

Here we have taken a wrapper with a heading and some news items in <ul> inside it. So this is a basic HTML structure of our horizontal news ticker. Now let’s check the CSS.

/*****************************
*	horizontal news ticker
******************************/

.ticker-wrapper-h{
	display: flex;	
	position: relative;
	overflow: hidden;
	border: 1px solid #1c6547;
}

.ticker-wrapper-h .heading{
	background-color: #1c6547;
	color: #fff;
	padding: 5px 10px;
	flex: 0 0 auto;
	z-index: 1000;
}
.ticker-wrapper-h .heading:after{
	content: "";
	position: absolute;
	top: 0;
	border-left: 20px solid #1c6547;
	border-top: 17px solid transparent;
	border-bottom: 15px solid transparent;
}


.news-ticker-h{
	display: flex;
	margin:0;
	padding: 0;
	padding-left: 90%;
	z-index: 999;
	
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: tic-h;
	animation-duration: 30s;
	
}
.news-ticker-h:hover { 
	animation-play-state: paused; 
}

.news-ticker-h li{
	display: flex;
	width: 100%;
	align-items: center;
	white-space: nowrap;
	padding-left: 20px;
}

.news-ticker-h li a{
	color: #212529;
	font-weight: bold;
}

@keyframes tic-h {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

If you want to know how it works, follow the steps below.

  1. Basically, .ticker-wrapper-h will wrap the whole news ticker. We have set it display property to flex and also set the overflow: hidden to hide the extra overflow part.
  2. The .heading will show the ticker heading i.e. “Trending Now” or “Latest News”. We have set z-index: 1000. This is because, when the news scrolls, do not overlap the heading element.
  3. Here we are using pseudo element i.e. .heading:after to make a small triangle after heading.
  4. .news-ticker-h will contains all the news items. The interesting part is, we have set padding-left: 90%;. It means, at the beginning of all the news items will start from the right side and scroll to the left.
    1. The animation-iteration-count: infinite; will make our animation infinite.
    2. animation-name: tic-h; This is our animation name where we have created two keyframes of 0% and 100%. The beginning of the keyframe i.e. 0%, we have set the transform property totranslate3d(0, 0, 0); and last keyframe i.e. 100% we have set it translate3d(-100%, 0, 0).
    3. To change the scrolling speed, we can change the animation-duration property. By default it is 30sec
  5. The .news-ticker-h li will contains our news item. The white-space: nowrap; will prevent the wrapping the context in new line.

The most important thing here is that we can add as many News items as we want.

Vertical News Ticker

vertical news ticker

Vertical news tickers are a lot like horizontal news tickers. But the main difference is that it scrolls from bottom to top without scrolling from right to the left.

In CSS there are some limitations to create a vertical ticker. For example, we can’t make a function to check how many items are present in <ol> tag. So this is not possible to dynamically create keyframes for animation. So, check the example first to understand this.

<div class="ticker-wrapper-v">
	<div class="heading">Trending Now</div>
	<ul class="news-ticker-v">
		<li><a href="">What is Lorem Ipsum?</a></li>
		<li><a href="">Why do we use it?</a></li>
		<li><a href="">Where does it come from?</a></li>
		<li><a href="">Where can I get some?</a></li>
        <li><a href="">The last news item</a></li>
	</ul>
</div>

The HTML structure is just like the horizontal ticker. But our animation will be based on how many news items there are. In our case, the total no of news items is 5. So have to make animation keyframes based on 5 news items.

/*****************************
*	vertical news ticker
******************************/
.ticker-wrapper-v{
	display: flex;	
	position: relative;
	overflow: hidden;
	border: 1px solid #1c6547;
	height: 36px;
}

.ticker-wrapper-v .heading{
	background-color: #1c6547;
	color: #fff;
	padding: 5px 10px;
	flex: 0 0 auto;
	z-index: 1000;
}
.ticker-wrapper-v .heading:after{
	content: "";
	position: absolute;
	top: 0;
	border-left: 20px solid #1c6547;
	border-top: 17px solid transparent;
	border-bottom: 15px solid transparent;
}

.news-ticker-v{
	display: flex;
	flex-wrap: wrap;
	margin:0;
	padding: 0;
	z-index: 999;
	
	animation: tic-v 10s cubic-bezier(1, 0, .5, 0) infinite;
}
.news-ticker-v:hover { 
	animation-play-state: paused; 
}

.news-ticker-v li{
	display: flex;
	width: 100%;
	line-height: 30px;
	align-items: center;
	white-space: nowrap;
	padding-left: 20px;
}

.news-ticker-v li a{
	color: #212529;
	font-weight: bold;
}

@keyframes tic-v {
	0%   {margin-top: 0;}
	20%  {margin-top: -30px;}
	40%  {margin-top: -60px;}
	60%  {margin-top: -90px;}
	80%  {margin-top: -120px;}
	100% {margin-top: 0;}
}

Let’s understand this.

  1. The main difference is we have set flex-wrap: wrap; to .news-ticker-v. It will helps to wrap the <li> items vertically insetead of long horizontal line.
  2. We have created total 6 keyframes for 5 news items. The first one i.e. 0% will show the first news item.
  3. The last news item i.e. no 5 will show at 80% keyframe and again set margin-top: 0; at 100% keframe.
  4. On hover over the ticker .news-ticker-v:hover, the animation will be paused i.e. animation-play-state: paused;

Vertical News Ticker with Thumbnail

vertical image ticker with thumbnail

A vertical image news ticker or scroller is usually found in the sidebar. Where a lot of news tends to scroll vertically.

In this tutorial, we will see how to create a vertical news scroller to show post image, post title, and post excerpt.

Basically, this ticker is like a vertical ticker. But instead of one news, many news items will scroll here.

<div class="ticker-wrapper-v-image">
	<ul class="news-ticker-v-image">
		<li>
			<div class="thumbnail">
				<a href="#" target="_blank">
					<img src="https://via.placeholder.com/150x80">
					<div class="clear"></div>
				</a>
			</div>
			<div class="news-info">      
				<div class="news_title">              
					<a href="#" target="_blank">
						What is Lorem Ipsum?
					</a>                                   
				</div>
				<div class="news-content">
					Lorem Ipsum is simply dummy text of the printing and typesetting industry.                                      
				</div>
			</div>
			<div class="clear"></div>
		</li>
		
		<li>
			<div class="thumbnail">
				<a href="#" target="_blank">
					<img src="https://via.placeholder.com/150x80">
					<div class="clear"></div>
				</a>
			</div>
			<div class="news-info">      
				<div class="news_title">              
					<a href="#" target="_blank">
						Why do we use it?
					</a>                                   
				</div>
				<div class="news-content">
					It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.                                        
				</div>
			</div>
			<div class="clear"></div>
		</li>
		
		<li>
			<div class="thumbnail">
				<a href="#" target="_blank">
					<img src="https://via.placeholder.com/150x80">
					<div class="clear"></div>
				</a>
			</div>
			<div class="news-info">      
				<div class="news_title">              
					<a href="#" target="_blank">
						Where does it come from?
					</a>                                   
				</div>
				<div class="news-content">
					Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC                                      
				</div>
			</div>
			<div class="clear"></div>
		</li>
		
		<li>
			<div class="thumbnail">
				<a href="#" target="_blank">
					<img src="https://via.placeholder.com/150x80">
					<div class="clear"></div>
				</a>
			</div>
			<div class="news-info">      
				<div class="news_title">              
					<a href="#" target="_blank">
						Where can I get some?
					</a>                                   
				</div>
				<div class="news-content">
					It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.                                       
				</div>
			</div>
			<div class="clear"></div>
		</li>
		
		<li>
			<div class="thumbnail">
				<a href="#" target="_blank">
					<img src="https://via.placeholder.com/150x80">
					<div class="clear"></div>
				</a>
			</div>
			<div class="news-info">      
				<div class="news_title">              
					<a href="#" target="_blank">
						It is a long established fact that
					</a>                                   
				</div>
				<div class="news-content">
					It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.    
				</div>
			</div>
			<div class="clear"></div>
		</li>
	</ul>
</div>

The HTML structure is very simple. Here, a news item i.e. <li> will show a thumbnail, post title, and post excerpt. The<div class="clear"></div> will fix the float item issue.

/*****************************
*	vertical news ticker with image
******************************/
.ticker-wrapper-v-image{
	display: flex;	
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.news-ticker-v-image{
	list-style: none;
	margin:0;
	padding: 0;
	animation: tic-v-image 20s cubic-bezier(1, 0, .5, 0) infinite;
}

.news-ticker-v-image:hover { 
	animation-play-state: paused; 
}

.news-ticker-v-image li{
	margin-bottom: 20px;
}
	
.news-ticker-v-image .thumbnail {
	max-width: 100%;
	height: auto;
	float: left;
	margin-right: 10px;
	display: inline-block;
}
.ticker-wrapper-v-image .clear {
	clear: both;
}
.ticker-wrapper-v-image .news_title a{
	color: #1c6547;
	font-size: 20px;
	font-weight: bold;
}
.ticker-wrapper-v-image .news_title{
	line-height: 20px;
}
.ticker-wrapper-v-image .news-content{
	color: #1d1d1d;
	font-size: 16px;
}

@keyframes tic-v-image {
	0%   {margin-top: 0;}
	25%  {margin-top: -16%;}
	50%  {margin-top: -32%;}
	75%  {margin-top: -50%;}
	100% {margin-top: 0;}
}
  1. In.news-ticker-v-image .thumbnail we have set it’s float property to left and also set display: inline-block;. It will help to show the .news_title and .news-content around the image.
  2. We have used clear: both; in .clear. to clear the floats.
  3. We have set total 5 keyframes to change the margin-top.

Conclusion

So today’s tutorial ends here. I hope you have learned from this tutorial how to create a news ticker only with CSS without using any JavaScript. If you have any problem comment below.

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment