https://github.com/rjkerrison/ticker-board
A JavaScript plugin for creating a tickerboard effect. Plugin for React or vanilla JS.
https://github.com/rjkerrison/ticker-board
display javascript solari-board split-flap split-flap-display ticker ticker-board
Last synced: 5 months ago
JSON representation
A JavaScript plugin for creating a tickerboard effect. Plugin for React or vanilla JS.
- Host: GitHub
- URL: https://github.com/rjkerrison/ticker-board
- Owner: rjkerrison
- License: mit
- Created: 2020-11-29T21:54:06.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-06-20T14:16:40.000Z (almost 4 years ago)
- Last Synced: 2025-11-01T09:07:03.008Z (7 months ago)
- Topics: display, javascript, solari-board, split-flap, split-flap-display, ticker, ticker-board
- Language: JavaScript
- Homepage: https://rjkerrison.co.uk/ticker-board/
- Size: 538 KB
- Stars: 18
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ticker-board
A JavaScript plugin for creating a tickerboard effect.
See the [Ticker Board](https://rjkerrison.co.uk/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`](./ticker-board/dist/ticker-board.min.js) to begin.
A simple
```html
<script>
```
will do it.
### Importing node module
Run
```sh
npm install ticker-board
```
Then you can import
```js
import { TickerBoard } from 'ticker-board'
```
or require
```js
const { TickerBoard } = require('ticker-board')
```
## Usage
Once imported, the easiest way is to create a list and
let the default behaviour scroll the messages.
```html
<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,
```js
new TickerBoard('.create-ticker')
```
For more complicated examples,
there is a `board.updateMessages()` method.
```js
document.getElementById('my-board')
const board = new Board(element)
board.updateMessages(['Apple', 'Banana', 'Cherry'])
```
See [`./demo/`](./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