Split Flap Text Effect In JavaScript – Ticker Board

Category: Animation , Javascript | June 7, 2021
Author: rjkerrison
Views Total: 93 views
Official Page: Go to website
Last Update: June 7, 2021
License: MIT

Preview:

Split Flap Text Effect In JavaScript – Ticker Board

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'])

You Might Be Interested In:


Leave a Reply