@arisbh/marqueeck

Marqueeck

Marqueeck is a custom marquee component for Sveltekit, speed-eased, style-free and without dependencies.

Features :

• Auto-repeat slotted elements (reactive to screen width)
• Custom speed, directions, gap, paddings, etc..
• Completely unstyled (come with your own classes)
• Custom hover interactions (stop, custom speed and event forwarding)
• Optional sticky element (start/end)
• Debug mode
• Fully typed with TypeScript

Demo

Github page

Installation

npm i @arisbh/marqueeck or pnpm i @arisbh/marqueeck or yarn i @arisbh/marqueeck

Usage

Once you've installed the module, use it in your project.

<script>
	import Marqueeck from '@arisbh/marqueeck';
</script>

<Marqueeck>[Your element]</Marqueeck>

Passing options

You can either pass your options directly in the <Marqueeck/> component :

<script>
	import Marqueeck from '@arisbh/marqueeck';
</script>

<Marqueeck options={{ speed: 75, direction: 'left' }}>[Your element]</Marqueeck>

or by constructing a MarqueeckOptions object, using provided Type :

<script lang="ts">
	import Marqueeck from '@arisbh/marqueeck';
	import type { MarqueeckOptions } from '@arisbh/marqueeck';

	const options: MarqueeckOptions = {
		speed: 75,
		direction: 'left',
		onHover: 'customSpeed',
		hoverSpeed: 15,
		gradualHoverDuration: 750
	};
</script>

<Marqueeck {options}>[Your element]</Marqueeck>

Optional sticky element

You can using the reserved svelte:fragment to place a sticky element inside the component.

<Marqueeck {options}>
	[Your element]
	<svelte:fragment slot="sticky">[Sticky element]</svelte:fragment>
</Marqueeck>

Edit the placement of the sticky element with stickyPosition key.

Hover directive

You can pass a custom function to run when you hover on the Marqueeck element.

<script>
	import Marqueeck from '@arisbh/marqueeck';

	const handleHover = () => {
		//do what you want
	};
</script>

<Marqueeck on:hover={{ handleHover }}>[Your element]</Marqueeck>

Default options

const options = {
	speed: 50, // in px/sec
	direction: 'left', // either 'left' or 'right'
	gap: 20, // in px
	paddingX_Wrapper: 20, // in px
	paddingY_Wrapper: 16, // in px
	debug: false,
	onHover: 'customSpeed', // either 'none', 'stop' or 'customSpeed'
	gradualHoverDuration: 1250, // in ms
	hoverSpeed: 10, // in px/sec
	stickyPosition: 'start' // either 'start' or 'end'
};