Horizontal News Ticker using Pure CSS

A news ticker is a bar containing the latest updates or news. The text on this bar animates to the left or right direction depending on the text language. Basically, a news ticker can be horizontal or vertical in regards to layout. In this tutorial, you will come to know how to create a horizontal news ticker with pure CSS.

Although, there are many jQuery/JavaScript plugins in order to create a news ticker. But, believe me, a general-purpose news ticker can be created using CSS animations only. Yup! you heard right, you can browse the demo page to check this news ticker.

You just need to create a full-width fixed bar and animate its text with CSS. So, without going into depth, let’s get started with news ticker coding.

HTML Structure for Horizontal News Ticker

First of all, create a wrapper (a div element with a class name "ticker-wrap") and build another div element inside it with the class name "ticker". Likewise, place your news text (or hyperlinks) inside the div and define its class name "ticker_item". So, the complete HTML structure for news ticker looks like:

<div class="ticker-wrap">
<div class="ticker">
  <div class="ticker__item">Place your news text here.</div>
  <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
  <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
  <div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck. </div>
  <div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>
  <div class="ticker__item">Letterpress chambray brunch.</div>
  <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
  <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
  <div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck. </div>
  <div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>
</div>
</div>

You are not limited to place only text inside the “ticker_item” div, you can also add small-sized images/thumbnails along with your text. Similarly, you can add hyperlinks according to your needs.

The CSS Styles

In CSS, keep the ticker wrapper fixed and define its width as 100%. Likewise, set a background color according to your choice/theme. Here, another important thing is that top or bottom position. You can set the news bar top or below of your webpage using CSS top or bottom property.

.ticker-wrap {
  position: fixed;
  bottom: 0;
    left: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: #e41b17;
  box-sizing: content-box;
}

Now, define some styles for news ticker inner area (for .ticker selector). Set the same height and line-height value as ticker-wrap height. Also, add ticker animation (that we’ll define in the last step) and set animation duration for text scrolling speed.

.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

After that, add some styles for news ticker items. Display it as inline-block, define its color, font-size, and padding property.

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: white;
}

Finally, add the following CSS animation in order to animate/scroll the news ticker text. If you want to scroll your text in the opposite direction, read this translate 3d tutorial to set custom values for transform property.

@-webkit-keyframes ticker {
  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);
  }
}
@keyframes ticker {
  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);
  }
}

That’s all! I hope you like this pure CSS horizontal news ticker. If you have any questions or suggestions, please let me know by comment.

You Might Be Interested In:

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

11 thoughts on “Horizontal News Ticker using Pure CSS”

  1. Thanks for this. I’m trying to understand if there’s a way to reduce the space between the ticker items. Any hints?

    • Hi Antony!
      You can reduce left & right spacing by changing the padding value (that is 2rem) for ticker items. Set custom value for padding property as follows:

      ticker-wrap .ticker__item {
        padding: 0 10px;
      }
      
  2. hi! this is so helpful. thank you so much. Is there a way to make this continuously loop without making the animation speed up?

    • Hi Claire!
      You are welcome. Basically, the text of news ticker continuously moves through a loop as it has “infinite” value for animation-iteration-count.

  3. Hi Muhammad.

    When the ticker hits the last news item it scrolls it off the screen and then the ticker is blank for a while.

    Is this intentional?

    Thanks.

    • Hi Baastian!
      Actually its not intentional. The ticker animation move the text from 0 to -100% and then start the animation again.

  4. True.

    I noticed most tickers act this way.

    Some are continuous where there is no pause or blank space.

    Thanks!.

    • Yes i wanted to know this too , is there a solution?

  5. Muhammad Asif… YOU ROCK…Exactly the thing I wanted

  6. @Muhammad Asif Thank You 🙂
    Been trying to find something like this for hours thank you!

  7. This is just what I was after, thank you so much.
    As other people have commented, there’s a long blank space after the text. Is there any code I can add to it loops seamlessly, so the copy starts again straight after?

Comments are closed.