JavaScript News Ticker

This JavaScript code snippet helps you to create a news ticker. It selects an element with the class of ticker and two other elements with classes of ticker__list and clones one of them. The querySelector() method is used to select the HTML elements with their respective class names and assign them to variables ticker and list. The cloneNode(true) method is called on the list variable to create a copy of the list element with all its child elements, including their text and attributes. The cloned list element is then appended to the end of the ticker element using the append() method.

Finally, this code will result in the list element being duplicated and added to the ticker element, thereby creating a scrolling or ticking effect on the webpage.

How to Create JavaScript News Ticker

First of all, load the following assets into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML structure for the news ticker as follows:

<div class="ticker">
  <div class="ticker__list">
    <div class="ticker__item"><img src="https://img.clock.co.uk/250x100?text=Item 1&amp;color=f3e5f5"/></div>
    <div class="ticker__item"><img src="https://img.clock.co.uk/300x100?text=Item 2&amp;color=ede7f6"/></div>
    <div class="ticker__item"><img src="https://img.clock.co.uk/200x100?text=Item 3&amp;color=ffcdd2"/></div>
    <div class="ticker__item"><img src="https://img.clock.co.uk/100x100?text=Item 4&amp;color=f8bbd0"/></div>
    <div class="ticker__item"><img src="https://img.clock.co.uk/350x100?text=Item 5&amp;color=e8eaf6"/></div>
    <div class="ticker__item"><img src="https://img.clock.co.uk/100x100?text=Item 6&amp;color=e3f2fd"/></div>
    <div class="ticker__item"><img src="https://img.clock.co.uk/250x100?text=Item 7&amp;color=e1f5fe"/></div>
    <div class="ticker__item"><img src="https://img.clock.co.uk/150x100?text=Item 8&amp;color=e0f7fa"/></div>
  </div>
</div>

Now, style the news ticker using the following CSS styles:

body {
  overflow: hidden;
}
.ticker {
  display: flex;
}
.ticker__list {
  display: flex;
  margin-top: 20px;
  animation: ticker 15s infinite linear;
}
.ticker:hover .ticker__list {
  animation-play-state: paused;
}
.ticker__item {
  margin-right: 20px;
}
@-moz-keyframes ticker {
  100% {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes ticker {
  100% {
    transform: translateX(-100%);
  }
}
@-o-keyframes ticker {
  100% {
    transform: translateX(-100%);
  }
}
@keyframes ticker {
  100% {
    transform: translateX(-100%);
  }
}

Finally, add the following JavaScript function for its functionality:

var ticker = document.querySelector('.ticker')
  , list = document.querySelector('.ticker__list')
  , clone = list.cloneNode(true)

ticker.append(clone)

That’s all! hopefully, you have successfully created the JavaScript news ticker. If you have any questions or suggestions, feel free to comment below.