Split Flap Text Effect In JavaScript – Ticker Board

Preview:

Description:

Ticker Board is a JavaScript library that simulates a split-flap text effect just like the split-flap departure board at an airport. Fully accessible for screen-readers.

How to use it:

1. Import the Ticker Board’s JavaScript and Stylesheet into the document.

<link rel="stylesheet" href="src/ticker.css" />
<script src="src/ticker.js"></script>
<script src="src/index.js"></script>

2. Initialize the Ticker Board on the container element whose inner text should be rotated hrough:

<p class="create-ticker">
  <span>A JS plugin</span> <span>for ticker boards</span>
</p>
<ul class="create-ticker">
  <li>Vanilla JS</li>
  <li>CSS included</li>
  <li>Auto rotating board</li>
  <li>Manual update API</li>
  <li>That's all so far</li>
</ul>

new TickerBoard('.create-ticker')

3. Update the Ticker Board.

board.updateMessages(['Apple', 'Banana', 'Cherry'])

Changelog:

11/21/2021

• mobile design tweaks

11/04/2021

• fixing bug in rotationboard

06/29/2021

• simplifying RotationBoard logic