An event-driven and feature-rich marquee component for Svelte.
Existing marquee libraries either lack of features, customization or ease of use. Its goal is to start from svelte-fast-marquee and svelte-marquee and leverage the UX and customization possibilities.
# pnpm
pnpm i -D svelte-neomarquee
# npm
npm i -D svelte-neomarquee
# bun
bun i -D svelte-neomarquee
# yarn
yarn add -D svelte-neomarquee
Name | Type | Description | Mandatory | Default value |
---|---|---|---|---|
play |
boolean | Whether the marquee should play | No | true |
playsCount |
number | The number of times the marquee should play (0 = infinite) | No | 0 |
speed |
number | The speed of the marquee, relative to its width/height | No | 100 |
direction |
"left" | "right" | "up" | "down" |
The direction of the marquee | No | "right" |
mode |
"single" | "multiple" |
Whether to repeat the slot content once or multiple times | No | "multiple" |
showGradient |
boolean | Whether to show a gradient on both ends; takes precedence over showLeadingGradient and showTrailingGradient |
No | false |
showLeadingGradient |
boolean | Whether to show a gradient on the first edge; overwritten by showGradient |
No | false |
showTrailingGradient |
boolean | Whether to show a gradient on the last edge; overwritten by showGradient |
No | false |
You can also pass:
style
to add inline styles to the marquee containerclass
to add classes to the marquee containerAdditionally, you can bind clientWidth
and clientHeight
to get the width and height of the marquee container.
You can pass the following CSS variables through the style
prop (or through class
with TailwindCSS) to customize the
marquee:
Variable | Type | Description | Mandatory | Default value |
---|---|---|---|---|
--gap |
string | The gap between elements in the marquee | No | 0 |
--gradient-width |
string | The width of the gradient on both sides | No | 10% |
--gradient-color |
string | The color of the gradient | No | black (#000000 ) |
Name | Description | Event detail 's parameters |
---|---|---|
playstart |
The marquee starts playing | None |
playpause |
The marquee pauses playing (play set to false but animation not ended) |
progress : the current progress, between 0 and 1 for each play |
playend |
The marquee ends its animation (only triggered on animation end if playsCount > 0) |
None |
progress |
The current progress of the marquee, live-updated | progress : the current progress, between 0 and 1 for each play |
hoverstart |
The mouse enters the marquee | None |
hoverend |
The mouse leaves the marquee | None |
Name | Description |
---|---|
- | Elements to show inside the marquee |
<script>
import Marquee from "svelte-neomarquee";
</script>
<Marquee>
{#each Array(10) as _, i}
<span>Element {i + 1}</span>
{/each}
</Marquee>
<script>
import Marquee from "svelte-neomarquee";
let play = true;
</script>
<Marquee bind:play on:hoverstart={() => (play = false)} on:hoverend={() => (play = true)}>
...
</Marquee>
<script>
import Marquee from "svelte-neomarquee";
</script>
<Marquee speed={200}>...</Marquee>
<script>
import Marquee from "$lib";
</script>
<Marquee showGradient style="--gradient-color: red; --gradient-width: 200px">...</Marquee>
<!-- or with TailwindCSS -->
<Marquee showGradient class="[--gradient-color:_red] [--gradient-width:_200px]">...</Marquee>
MIT