Scroll Text Infinitely – text-roller

Category: Animation , Text | May 4, 2020
Views Total:3,649 views
Official Page:Go to website
Last Update:May 4, 2020


Scroll Text Infinitely – text-roller


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>

2. Apply your CSS styles to the 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.


You Might Be Interested In:

Leave a Reply