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

by

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 news ticker in HTML.

CONTENTS

News Ticker Demo

Please take a look at the ‘demo’ page first for the CSS ticker example.

Demo
Download

Horizontal News Ticker

Horizontal news ticker

A horizontal news ticker is the most basic type of HTML ticker. You can create it to show the breaking news. But we will not use any JavaScript in our code. So let’s check the horizontal news scroller HTML code:

<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 news ticker 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 horizontal scrolling news ticker HTML 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 scrolling news ticker in HTML. 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 an animation. So, check the vertical news scroller HTML code.

<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.

       ...

9 thoughts on “Create 3 Types of Horizontal and Vertical News Ticker Only With HTML & CSS”

  1. Hello……I’ve been having a great time with the vertical news scroller….. Using it as an information source for site visitors. Having difficulty trying to add a 6th line of information and not sure how to adjust the key frames….and think I will have to change speed as the entire pack will become slower with an additional line of text….and another key frame…..Can you advise me on this…….Thanks so much for your good work..Bill

    Reply

  2. Hello….It’s Bill again….Still enjoying the Vertical News Scroller…..it’s Great…..I would like to be able to adjust speed from when the text item begins to scroll out of view – to when is is out of view. Currently I have speed adjusted to very slow so that viewers can read each particular line of text, but the speed at which each line of text scrolls out of view is correspondingly very slow….Would like to keep text in view long enough to easily read, and then accelerate the speed that text moves out of view…. …..Somewhat faster to move out of view, and slow to stay in view long enough to read. Can someone suggest code to help me. …Thanks..Bill

    Reply

    • Hey Bill. To trick the current work flow just add something like this:

      @keyframes tickerv {
      0% { bottom: 0; } /* FIRST ITEM */
      22% { bottom: 0; } /* FIRST ITEM */
      27% { bottom: 2.9vw; } /* SECOND ITEM */
      49% { bottom: 2.9vw; } /* SECOND ITEM */
      54% { bottom: 5.8vw; } /* THIRD ITEM */
      76% { bottom: 5.8vw; } /* THIRD ITEM */
      80% { bottom: 8.7vw; } /* FORTH ITEM */
      99.99% { bottom: 8.7vw; } /* FORTH ITEM */
      100% { bottom: 0; } /* BACK TO FIRST */
      }

      This will make it to where the frame stays on the words longer but jumps to the next line quicker.

      Thanks,
      Eraush

      Reply

    • Jens,

      I believe you would be forced into using code like JavaScript to get what you are looking for. I would recommend looking into that next. (Alongside that is AJAX which is Asynchronous JavaScript and XML.)

      Another set of programming languages to look at would be ASP.Net, PHP, and Python if you are wanting to accept data from users and work with databases / Active Directory / LDAP.

      Reply

  5. I am managing my own site and put this tricker in my site. I put the first part in html drafting and next in css of advanced layout. Dont know how to link it to my “popular posts” widget of my site. is it possible and if please guide me. currently, I fed my new in html drafting. you may visit my site to observe .

    Reply

Leave a Comment