Skip to content

PaulMaly/svelte-ticker

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published