<h1>MonstaX Top 10</h1>
<div class="rolling">
  <ul class="rolling__list">
    <li>1. Follow</li>
    <li>2. Shoot out</li>
    <li>3. Play it cool</li>
    <li>4. Fantasia</li>
    <li>5. Mercy</li>
    <li>6. Hero</li>
    <li>7. Rush Hour</li>
    <li>8. Jealousy</li>
    <li>9. Kiss of Death</li>
    <li>10. Love Killa</li>
  </ul>
</div>
body {
  box-sizing: border-box;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1 {
  font-size: 1rem;
}
.rolling {
  width: 300px;
  height: 34px;
  overflow: hidden;
  border: 1px solid #bbb;
  .rolling__list {
    li {
      height: 34px;
      padding: 0 1rem;
      font-weight: 700;
      line-height: 34px;
    }
  }
}
View Compiled 
const newsTicker = (timer) => {
  const $ul = document.querySelector('ul');

  window.setInterval(() => {
    $ul.style.transitionDuration = "400ms";
    $ul.style.marginTop = "-34px";

    window.setTimeout(() => {
      $ul.style.transitionDuration = "";
      $ul.style.marginTop = "";
      // send the first element to the back 400ms later.
      $ul.appendChild($ul.querySelector("li:first-child"));
    }, 400)

  }, timer)
}

newsTicker(1500)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.