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.