Split Flap Text Effect In JavaScript – Ticker Board

Category: Animation , Javascript | June 29, 2021
Views Total:354 views
Official Page:Go to website
Last Update:June 29, 2021


Split Flap Text Effect In JavaScript – Ticker Board


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>
<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>
new TickerBoard('.create-ticker')

3. Update the Ticker Board.

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



  • simplifying RotationBoard logic

You Might Be Interested In:

Leave a Reply