https://github.com/warningimhack3r/svelte-neomarquee
An event-driven and feature-rich marquee component for Svelte
https://github.com/warningimhack3r/svelte-neomarquee
component css html marquee svelte
Last synced: 4 months ago
JSON representation
An event-driven and feature-rich marquee component for Svelte
- Host: GitHub
- URL: https://github.com/warningimhack3r/svelte-neomarquee
- Owner: WarningImHack3r
- License: mit
- Created: 2024-08-05T17:51:10.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-06T03:39:49.000Z (over 1 year ago)
- Last Synced: 2025-02-06T04:27:08.998Z (over 1 year ago)
- Topics: component, css, html, marquee, svelte
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-neomarquee
- Size: 59.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/abosch19/svelte-fast-marquee) and [svelte-marquee
](https://github.com/selemondev/svelte-marquee) and leverage the UX and customization possibilities.
## Features
- Highly customizable
- Strongly typed
- Event-driven
- TailwindCSS-compatible
## Installation
```shell
# 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
```svelte
import Marquee from "svelte-neomarquee";
{#each Array(10) as _, i}
Element {i + 1}
{/each}
```
### Pause on hover
```svelte
import Marquee from "svelte-neomarquee";
let play = true;
(play = false)} on:hoverend={() => (play = true)}>
...
```
### Custom speed
```svelte
import Marquee from "svelte-neomarquee";
...
```
### Custom gradient
```svelte
import Marquee from "$lib";
...
...
```
## License
MIT