Back

Example

In a paragraph:

Script

The following produced the above effect.

    <p>
      In a paragraph: <span class="typer" id="some-id" data-delay="100" data-delim=":" data-words="apples:and:oranges"
      data-colors="red,black,orange"></span>
      <span class="cursor" data-cursorDisplay="_" data-owner="some-id"></span>
    </p>
    <button class="typer-stop" data-owner="some-id">Stop</button>
    <button class="typer-start" data-owner="some-id">Start</button>
  

Example 2

Script

The following produced the above effect.

    <p>
      <span class="typer" id="second-id" data-words="bears,beets,battlestar galactica"
      data-colors="#266D98,#3CB29A,#422B72"></span>
      <span style="font-size:1.2em;vertical-align:middle;" class="cursor" data-cursorDisplay="|" data-owner="second-id"></span>
    </p>
    <button class="typer-stop" data-owner="second-id">Stop</button>
    <button class="typer-start" data-owner="second-id">Start</button>