svelte-marquee-text
[CSS GPU Animation] Marquee Text for Svelte
Demo
https://borakilicoglu.github.io/svelte-marquee-text
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 -->
<MarqueeTextWidget>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna.
</MarqueeTextWidget>
<!-- short text need more duplicates -->
<MarqueeTextWidget repeat="{10}">
Short text =(
</MarqueeTextWidget>
<!-- slow duration -->
<MarqueeTextWidget duration="{30}">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna.
</MarqueeTextWidget>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | Number | 15 | Animation Duration |
| repeat | Number | 2 | Number of repeat the Slot (It's important for to short content) |
| paused | Boolean | false | The property specifies whether the animation is running or paused |
| pauseOnHover | Boolean | false | The property specifies whether the animation should be paused when hovered over |