Svelte Ticker for Svelte 3 demo
Simple Svelte component which automatically makes its contents scrollable ticker-style if it's necessary. Looks like html <marquee> tag but much better. Can be useful for such things like News Tickers etc.
Features
- 4 directions
- duration & delay
- responsive
- infinity or exact looping
- pausing on hover
Install
npm i svelte-ticker --save-dev
yarn add svelte-ticker
CDN: UNPKG | jsDelivr (available as window.Ticker)
Usage
<Ticker>
<strong>Your very long string here or even html elements</strong>
</Ticker>
<script>
import Ticker from 'svelte-ticker';
</script>
If you are not using using es6, instead of importing add
<script src="/path/to/svelte-ticker/index.js"></script>
just before closing body tag.
API
Props
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
direction |
String |
Possible values: 'left', 'right', 'top', 'bottom' | No | left |
duration |
Number |
Animation duration in seconds | No | 30 |
delay |
Number |
Delay before animation goes in seconds | No | 0 |
loop |
`Boolean | Number` | Determines should the animation be looped or played number the times. | No |
pausing |
Boolean |
Determines should the animation be paused on hover | No | true |
alternate |
Boolean |
Determines should the animation be played forwards first, then backwards | No | false |
behavior |
String |
Possible values: 'auto' and 'always' | No | auto |
License
MIT © PaulMaly
