Scroll Text Infinitely – text-roller

Preview:

Description:

text-roller is a lightweight JavaScript to create a text scroller/carousel that allows you to scroll text infinitely in the horizontal direction.

Similar to the traditional marquee tag.

How to use it:

1.  Wrap your text (e.g. breaking news) into the text roller.

<div id="text-roller">
  <span>1. This text is going to scroll infinitely - 2. This text is going to scroll infinitely - </span>
</div>

2. Apply your CSS styles to the text roller.

#text-roller{
  position: relative;
  background-color: #222;
  color: #fff;
  white-space: nowrap;
}

3. Load the text-roller library at the end of the document.

<script src="text-roller.js"></script>

4. Initialize the text roller.

var element = document.getElementById("text-roller");
var text_roller = new TextRoller(element);

5. Start the text roller.

text_roller.start();