Split Flap Text Effect In JavaScript – Ticker Board

Views Total:0 views
Official Page:Go to website
Last Update:June 7, 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="" />
<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'])

Source link

Add comment


All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.