THEMETRIAL

Split Flap Text Effect In JavaScript – Ticker Board

Author:rjkerrison
Views Total:0 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="https://www.cssscript.com/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'])


Source link

Add comment

NOTE :

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

Only share the source www.themetrial.com

Follow us

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