svelte-neomarquee Svelte Themes

Svelte Neomarquee

An event-driven and feature-rich marquee component for Svelte

svelte-neomarquee

An event-driven and feature-rich marquee component for Svelte.

Motivation

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.

Features

  • Highly customizable
  • Strongly typed
  • Event-driven
  • TailwindCSS-compatible

Installation

# pnpm
pnpm i -D svelte-neomarquee
# npm
npm i -D svelte-neomarquee
# bun
bun i -D svelte-neomarquee
# yarn
yarn add -D svelte-neomarquee

Usage

Props

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 container
  • class to add classes to the marquee container
  • any other prop, which will be passed to the marquee container

Additionally, you can bind clientWidth and clientHeight to get the width and height of the marquee container.

CSS variables

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)

Events

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

Slots

Name Description
- Elements to show inside the marquee

Examples

Basic

<script>
    import Marquee from "svelte-neomarquee";
</script>

<Marquee>
    {#each Array(10) as _, i}
        <span>Element {i + 1}</span>
    {/each}
</Marquee>

Pause on hover

<script>
    import Marquee from "svelte-neomarquee";

    let play = true;
</script>

<Marquee bind:play on:hoverstart={() => (play = false)} on:hoverend={() => (play = true)}>
    ...
</Marquee>

Custom speed

<script>
    import Marquee from "svelte-neomarquee";
</script>

<Marquee speed={200}>...</Marquee>

Custom gradient

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

License

MIT

Top categories

Loading Svelte Themes