| 1 | # Svelte Ticker for Svelte 3 [demo](https://svelte.dev/repl/89ebabbb47c64fe591c01010de096f93?version=3.16.4)
|
| 2 |
|
| 3 | [](https://www.npmjs.com/package/svelte-ticker) [](https://www.npmjs.com/package/svelte-ticker)
|
| 4 |
|
| 5 | 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.
|
| 6 |
|
| 7 | ## Features
|
| 8 |
|
| 9 | - 4 directions
|
| 10 | - duration & delay
|
| 11 | - responsive
|
| 12 | - infinity or exact looping
|
| 13 | - pausing on hover
|
| 14 |
|
| 15 | ## Install
|
| 16 |
|
| 17 | ```bash
|
| 18 | npm i svelte-ticker --save-dev
|
| 19 | ```
|
| 20 |
|
| 21 | ```bash
|
| 22 | yarn add svelte-ticker
|
| 23 | ```
|
| 24 |
|
| 25 | CDN: [UNPKG](https://unpkg.com/svelte-ticker/) | [jsDelivr](https://cdn.jsdelivr.net/npm/svelte-ticker/) (available as `window.Ticker`)
|
| 26 |
|
| 27 | ## Usage
|
| 28 |
|
| 29 | ```svelte
|
| 30 | <Ticker>
|
| 31 | <strong>Your very long string here or even html elements</strong>
|
| 32 | </Ticker>
|
| 33 |
|
| 34 | <script>
|
| 35 | import Ticker from 'svelte-ticker';
|
| 36 | </script>
|
| 37 | ```
|
| 38 |
|
| 39 | If you are **not** using using es6, instead of importing add
|
| 40 |
|
| 41 | ```html
|
| 42 | <script src="/path/to/svelte-ticker/index.js"></script>
|
| 43 | ```
|
| 44 |
|
| 45 | just before closing body tag.
|
| 46 |
|
| 47 | ## API
|
| 48 |
|
| 49 | ## Props
|
| 50 |
|
| 51 | | Name | Type | Description | Required | Default |
|
| 52 | | --- | --- | --- | --- | --- |
|
| 53 | | `direction` | `String` | Possible values: 'left', 'right', 'top', 'bottom' | No | `left` |
|
| 54 | | `duration` | `Number` | Animation duration in seconds | No | `30` |
|
| 55 | | `delay` | `Number` | Delay before animation goes in seconds | No | `0` |
|
| 56 | | `loop` | `Boolean / Number` | Determines should the animation be looped or played number the times. | No | `true` |
|
| 57 | | `pausing` | `Boolean` | Determines should the animation be paused on hover | No | `true` |
|
| 58 | | `alternate` | `Boolean` | Determines should the animation be played forwards first, then backwards | No | `false` |
|
| 59 | | `behavior` | `String` |Possible values: 'auto' and 'always' | No | `auto` |
|
| 60 |
|
| 61 | ## License
|
| 62 |
|
| 63 | MIT © [PaulMaly](https://github.com/PaulMaly)
|