lambda2 / text-roller

A fork of #odometer. Display letters instead of numbers

TextRoller

TextRoller is a Javascript and CSS library for smoothly transitioning words. This plugin is largely derived from the plugin Odometer made by Adam Schwartz and Zack Bloom of HubSpot.

Getting Started

This plugin have no dependancies. Download the production version or the development version.

In your web page:

<!-- the odometer stylesheet -->
<link rel="stylesheet" href="../themes/odometer-theme-minimal.css" />

<script src="../textroller.js"></script>
<div id="roller" class="textroller"></div>

<script>
  var elt         = document.getElementById("roller");
  var texts       = ["pancake", "muffin", "cookie"]
  elt.textroller  = new TextRoller({
      el: elt,
      values: texts,    // an array of texts.     default : [el.innerHtml]
      align: "left",    // right, left or middle. default : middle
      delay: 3000,      // in milliseconds,       default : 5000
      loop: false       // at the end, restart.   default : true
  });
</script>