@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's width)
• 🎛️ Custom speed, directions, gap, paddings, etc..
• 🧶 Minimum styling (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>

Options

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

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

or by constructing a MarqueeckOptions object, using the provided MarqueeckOptions type :

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

	const options = {
		speed: 75,
		direction: 'left',
		onHover: 'customSpeed'
		// ...
	};
</script>

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

Default options

If you don't pass any options to the Marqueeck element, it will use the following 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'
};

Optional sticky element

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

Customize its placement with the stickyPosition key inside options.

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

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>

Styling

Marqueeck comes with minimal style integration, giving you the flexibility to use your prefered classes and styling paradigm.

Slotted Component

You have full control over the element you're slotting inside Marqueeck, therefore you can style it as you want.

CSS Variables

You can directly pass CSS variables for the background and text colors, using any CSS authorized colors (name, hex, hsl, etc...) :

<Marqueeck --bg-color={'red'} --text-color={'#fff'} />

Custom classes

Marqueeck accepts contentClasses, elementClasses and stickElClasses as strings to style the different aspect of the components.

Define your own custom class or use utility framework like Tailwind or MasterCSS.

You can find the default styles below :

.marqueeck-wrapper {
	width: 100%;
	background: var(--bg-color, lightslategrey);
	color: var(--text-color, white);
	display: flex;
	flex-flow: row;
	flex-wrap: nowrap;
	overflow-x: hidden;
	position: relative;
}

.marqueeck-content {
	display: inherit;
	flex-flow: inherit;
	flex-wrap: inherit;
	gap: inherit;
	position: inherit;
}

span.marqueeck-child {
	display: inline;
	width: max-content;
}

.marqueeck-sticky {
	position: absolute;
	background: var(--bg-color, lightslategrey);
	width: -moz-fit-content;
	width: fit-content;
}

code.marqueeck-log {
	display: flex;
	flex-flow: column wrap;
	border: 1px solid lightslategrey;
	padding: 4px;
	margin-block: 8px;
	margin-inline: 8px;
	border-radius: 4px;
	width: -moz-fit-content;
	width: fit-content;
	font-size: 13px;
}