2 Ways to Create HTML & CSS News Ticker (Horizontal and Vertical)

Welcome to a tutorial on how to create a news ticker with just pure HTML and CSS. Need to add a block of scrolling news text? Yep, it is actually possible with today’s technology, using only pure CSS. There will not be a single line of Javascript involved in this tutorial – Read on to find out!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything.

 

TABLE OF CONTENTS

Download & Notes	Horizontal Ticker	Vertical Ticker
Useful Bits & Links	Tutorial Video	The End

 

 

QUICK SLIDES

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code in a zip file – I have released it under the MIT License, so feel free to build on top of it if you want to.

 

 

THE HTML

<div class="hwrap"><div class="hmove">
  <div class="hitem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="hitem">Aliquam consequat varius consequat.</div>
  <div class="hitem">Fusce dapibus turpis vel nisi malesuada sollicitudin.</div>
  <div class="hitem">Pellentesque auctor molestie orci ut blandit.</div>
</div></div>

Yep. That is a lot of <div> and there is a good reason behind why. We will go through that below, but just sandwich more <div class="hitem"> within if you want to add more items.

 

 

THE CSS

/* (A) FIXED WRAPPER */
.hwrap {
  overflow: hidden; /* HIDE SCROLL BAR */
  background: #eee;
}
 
/* (B) MOVING TICKER WRAPPER */
.hmove { display: flex; }

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
 
/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
  0% { transform: translate3d(100%, 0, 0); }
  100% { transform: translate3d(-400%, 0, 0); }
}
.hmove { animation: tickerh linear 15s infinite; }
.hmove:hover { animation-play-state: paused; }

If you are interested in how this ticker works in detail, here is how from the outermost to the innermost elements.

1. .hwrap This is the “outer container” that will stay fixed on the screen. The only important part here is overflow: hidden to hide the scrollbars.
2. .hmove This is the “inside container” that we will use CSS animation to move from right to left.
3. .hitem The individual items. We use flex-shrink: 0 to lay all of the items out in a long horizontal row, and set width: 100% to give all items a uniform width.
4. The ticker magic happens here by using CSS animation.
   • @keyframes tickerh should be pretty self-explanatory. We are basically just moving the entire .hmove wrapper from right to left using translate3d.
   • .hmove { animation: tickerh } attach the keyframes to the wrapper.
   • Lastly, .hmove:hover { animation-play-state: paused; } is a small touch to pause the slides on mouse hover.

Yep, it is surprisingly easy with the use of modern CSS.

 

THE DEMO

 

THE LIMITATIONS & ADDING ITEMS

• As you can see, the animation-duration is fixed in CSS.
• Meaning, the ticker speed becomes faster when more items are added. You have to manually readjust the duration yourself based on the amount of text.
• This will also mean having a different ticker speed on various screen sizes.
• Lastly, change translate3d(-400%, 0, 0) to the number of items you have. I.E. -(NUMBER OF ITEMS * 100%)

 

 

RECOMMENDED SOLUTION

Yep, this is kind of dumb, but limit the amount of text that you put in, so that the speed is more or less controlled. You can also use the media query to control the ticker speed on different screen sizes.

@media only screen and (max-width: 768px) {
  .hmove { animation-duration: 20s; }
}

 

 

THE HTML

<div class="vwrap"><div class="vmove">
  <div class="vitem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="vitem">Aliquam consequat varius consequat.</div>
  <div class="vitem">Fusce dapibus turpis vel nisi malesuada sollicitudin.</div>
  <div class="vitem">Pellentesque auctor molestie orci ut blandit.</div>
</div></div>

Look no further – This is the same as the horizontal version. Just sandwich more <div class="vitem"> if you want to add more items.

 

 

THE CSS

/* (A) STANDARD ROW HEIGHT */
.vwrap, .vitem {
  height: 30px;
  line-height: 30px;
}
 
/* (B) FIXED WRAPPER */
.vwrap {
  overflow: hidden; /* HIDE SCROLL BAR */
  background: #eee;
}
/* (C) TICKER ITEMS */
.vitem { text-align: center; }
 
/* (D) ANIMATION - MOVE ITEMS FROM TOP TO BOTTOM */
/* CHANGE KEYFRAMES IF YOU ADD/REMOVE ITEMS */
.vmove { position: relative; }
@keyframes tickerv {
  0% { bottom: 0; } /* FIRST ITEM */
  30% { bottom: 30px; } /* SECOND ITEM */
  60% { bottom: 60px; } /* THIRD ITEM */
  90% { bottom: 90px; } /* FORTH ITEM */
  100% { bottom: 0; } /* BACK TO FIRST */
}
.vmove {
  animation-name: tickerv;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.vmove:hover { animation-play-state: paused; }

The idea behind the vertical version is pretty much the same as the horizontal too:

1. First, we set the outer wrapper and items to the same height – .vwrap, .vitem { height: 30px; }
2. Same old story, hide the ugly scrollbar on the “outer fixed wrapper” – .vwrap { overflow: hidden; }
3. Optional cosmetics for the items.
4. Instead of using translate3d to slide through the items, we now use position: relative and bottom.

 

THE DEMO

 

LIMITATIONS & ADDING ITEMS

Just like the above horizontal ticker, the keyframes in the CSS animation is fixed, meaning:

• If you want to add more or remove lines, you have to readjust the entire @keyframes tickerv manually.
• Also, remember to adjust the animation-duration as well.

But apart from that, not much pain in using this vertical version.

 

 

 

COMPATIBILITY CHECKS

• CSS Flex – CanIUse
• CSS Animations – CanIUse
• CSS Transform – CanIUse

The news tickers will explode in the ancient Internet Exploders, no problems on all modern browsers otherwise.

 

LINKS & REFERENCES

Changed your mind? Want to use libraries in your project? Here are a few news tickers that are based on libraries.

• 10 Best News Ticker Plugins In jQuery And Pure JavaScript/CSS – jQueryScript.net
• Scrolling Breaking News Ticker – Bootsnipp

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET