1.1.0 • Published 4 years ago

svelte-marquee-text-widget v1.1.0

Weekly downloads
4
License
MIT
Repository
github
Last release
4 years ago

svelte-marquee-text-widget

[CSS GPU Animation] Marquee Text for Svelte

npm license npm

Demo

https://borakilicoglu.github.io/svelte-marquee-text-widget/

Install

npm install svelte-marquee-text-widget or yarn add svelte-marquee-text-widget

Usage

Import that in your App.svelte or similar file

import MarqueeTextWidget from "svelte-marquee-text-widget";

On your page you can now use html like this:

<!-- simple marquee text -->
<marquee-text-widget>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna.
</marquee-text-widget>

<!-- short text need more duplicates -->
<marquee-text-widget repeat="{10}">
  Short text =(
</marquee-text-widget>

<!-- slow duration -->
<marquee-text-widget duration="{30}">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna.
</marquee-text-widget>

Props

PropTypeDefaultDescription
durationNumber15Animation Duration
repeatNumber2Number of repeat the Slot (It's important for to short content)
pausedBooleanfalseThe property specifies whether the animation is running or paused