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
Firstly, here is the download link to the example code as promised.
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.
QUICK NOTES
- There is nothing to install, so just download and unzip into a folder.
ticker.html
is a horizontal ticker, whileticker-vert.html
is a vertical ticker.
If you spot a bug, please feel free to comment below. I try to answer 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.
HORIZONTAL NEWS TICKER
We shall start with a common horizontal news ticker, credits to Hipster Ipsum for the original code I found at Codepen.
THE HTML
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="ticker-item">Aliquam consequat varius consequat.</div>
<div class="ticker-item">Fusce dapibus turpis vel nisi malesuada sollicitudin.</div>
<div class="ticker-item">Pellentesque auctor molestie orci ut blandit.</div>
</div></div></div>
Yep… That is a lot of <div>
, 3 layers to be exact. Will go through that later, but if you want to add more items, just sandwich more <div class="ticker-item">
within.
THE CSS
/* OUTER CONTAINER */
.tcontainer {
width: 100%;
overflow: hidden; /* Hide scroll bar */
}
/* MIDDLE CONTAINER */
.ticker-wrap {
width: 100%;
padding-left: 100%; /* Push contents to right side of screen */
background-color: #eee;
}
/* INNER CONTAINER */
@keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
/* Basically move items from right side of screen to left in infinite loop */
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 10s;
}
.ticker-move:hover{
animation-play-state: paused; /* Pause scroll on mouse hover */
}
/* ITEMS */
.ticker-item{
display: inline-block; /* Lay items in a horizontal line */
padding: 0 2rem;
}
If you are interested in how this ticker works in detail, here is how from the outermost element to the innermost.
.tcontainer
Just a 100% width container withoverflow: hidden
to hide the scrollbars..ticker-wrap
Another 100% width container, and haspadding-left: 100%
to push all the internal item offscreen to the right..ticker-move
This layer does the actual ticker magic with CSS animation.@keyframes ticker
Basically, an animation sequence that moves.ticker-move
from right to left..ticker-item
Individual items of the ticker. Displayed ininline-block
, so all the text lines up in a single row.
In a nutshell, all the text items are pushed off the screen using padding-left: 100%
, then moved back using a CSS animated translate3d(-100%, 0, 0)
. In an infinite animation loop, that is.
THE DEMO
THE LIMITATIONS & ADDING ITEMS
- As you can see, the
animation-duration
is fixed in CSS. - Meaning, if more text is added, the ticker speed will become faster. 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.
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) {
.ticker-move { animation-duration: 20s; }
}
VERTICAL NEWS TICKER
We shall now move into a vertical news ticker. Credits to Rishabh for the original code at CSSDeck.
THE HTML
<div class="tickerv-wrap"><ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aliquam consequat varius consequat.</li>
<li>Fusce dapibus turpis vel nisi malesuada sollicitudin.</li>
<li>Pellentesque auctor molestie orci ut blandit.</li>
</ul></div>
The HTML for the vertical ticker is a lot easier, just wrap a list inside a <div>
. Captain Obvious, add more <li>
if you need more items.
THE CSS
/* WRAPPER */
.tickerv-wrap {
background: #eee;
box-sizing: content-box;
height: 25px; /* Take note of this */
overflow: hidden; /* Hide scrollbars */
padding: 10px;
}
/* TICKER ANIMATION */
@keyframes tickerv {
0% {margin-top: 0;}
/* Quite literally -ve height of wrapper */
25% {margin-top: -26px;} /* 1 X 25 px */
50% {margin-top: -52px;} /* 2 X 25 px */
75% {margin-top: -78px;} /* 3 X 25 px */
100% {margin-top: 0;} /* Back to first line */
}
.tickerv-wrap ul {
padding: 0;
margin: 0;
list-style-type: none;
animation-name: tickerv; /* Loop through items */
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.tickerv-wrap ul:hover {
/* Pause on mouse hover */
animation-play-state: paused;
}
/* ITEMS */
.tickerv-wrap ul li {
font-size: 18px;
line-height: 26px /* Same as wrapper height */
}
The vertical ticker is a little easier to understand than the horizontal one:
- Basically, we give the list items a fixed height
.tickerv-wrap ul li { line-height: 26px }
. - Then, we put this list into a container that will only display one line
.tickerv-wrap { height: 25px }
. - Finally, as you may have already guessed, CSS animation magic
@keyframes tickerv
will scroll through all the items.
THE DEMO
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aliquam consequat varius consequat.
- Fusce dapibus turpis vel nisi malesuada sollicitudin.
- Pellentesque auctor molestie orci ut blandit.
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.
USEFUL BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
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
YOUTUBE TUTORIAL
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end of this short tutorial. I hope it has helped you create better websites, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!
Amazing content!! I have been looking for it for days. You made it very simple, modern and efficient. I loved that you have used just HTML and CSS. Thank you!!!!! PS: I would like to insert images instead text is it possible?
Yes, just insert the
<img>
inside the<div class="ticker-item">
.Thank you – Very Useful
TL;DR – Sir, you’re a credit to your profession…sublime & succinct, I’ve been searching a solution on this level – and it WORKS – no questions asked. Thank you again…
All of this looks very PROMISING,
but THIS PAGE isn’t delivering on its offer to DOWNLOAD the “.zip” files!!
The links are non-existent or mal-functioning !!!
The zip file is on the server and link is WORKING!? Sometimes, I don’t understand people… You could have just COPY-AND-PASTED the code in just 1 minute. Thanks for reporting anyway.
Thank You so Much 🙂 you saved my time, ticker is working properly great help.
how can I change the container line to dotted?
.ticker-wrap { border: 2px dotted black }
thanks
The end of the text never scrolls past…. it just instantly disappears… and then shows the beginning again.
Pointless.
Then just change the pointless keyframes to scroll past the pointless -100% mark
100% { transform: translate3d(-120%, 0, 0); }
.Or maybe pointlessly freeze the last frame for a while with
75% { transform: translate3d(-80%, 0, 0); } 100% { transform: translate3d(-80%, 0, 0); }
.Tutorials do really become pointless when people pointlessly miss out on the important points. They don’t bother to read nor find out how CSS animations work, then pointlessly cite a pointless word such as pointless. 😆
Super! I’m not a coder but managed to get it to work on a Weebly site home page through the embed code widget. It solved a feature request. Thanks. Now my next mountain is to figure out how to make it dynamic with php or something so I don’t have to manually change the html every week.
If have more line items to go through what do I change so it can get through them all? Only gets through about 4 and resets.
Hi Eric – As written in the limitations, you will have to change the CSS keyframes.
Perfect solution
Great work all of you
PERFECT! Thank you – saved me hours. Lots of not so good solutions – yours – perfect.