ticker-board
A JavaScript plugin for creating a tickerboard effect.
See the Ticker Board page for more info.
Importing it
There are basically two ways to import, and one way to use the Tickerboard.
Importing minified JS
Download the file at ./ticker-board/dist/ticker-board.min.js to begin.
A simple
<script src="./ticker-board.min.js"><script>
will do it.
Importing node module
Run
npm install ticker-board
Then you can import
import { TickerBoard } from 'ticker-board'
or require
const { TickerBoard } = require('ticker-board')
Usage
Once imported, the easiest way is to create a list and let the default behaviour scroll the messages.
<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>
And then in your JavaScript,
new TickerBoard('.create-ticker')
For more complicated examples, there is a board.updateMessages() method.
document.getElementById('my-board')
const board = new Board(element)
board.updateMessages(['Apple', 'Banana', 'Cherry'])
See ./demo/ for more examples.
Advantages
- Vanilla JS, so can be used with any framework
- Webpack minified
- Node module available
- Good performance thanks to
window.requestAnimationFrame
Disadvantages
- Could be typescript
- Low on documentation
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
14 Oct 3, 2022
1 Apr 13, 2022
6 Jun 27, 2022
71 Dec 16, 2022
13 Apr 21, 2022
7 Jul 19, 2022
669 Jul 22, 2022