demo
Svelte Ticker for Svelte 3Simple 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
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 | true |
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