svelte-ticker

1.0.0 • Public • Published

Svelte Ticker for Svelte 3 demo

NPM version NPM downloads

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 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

Readme

Keywords

Package Sidebar

Install

npm i svelte-ticker

Weekly Downloads

41

Version

1.0.0

License

MIT

Unpacked Size

43.6 kB

Total Files

7

Last publish

Collaborators

  • paulmaly