Skip to Content
DocumentationLayout PrimitivesMarquee

Marquee

Displays child elements in a continuous horizontal scrolling format.

When you use Marquee in HTML, also load the JavaScript entry for it.

import '@inc2734/unitone-css/layout-primitives/marquee/behavior';
// or import '@inc2734/unitone-css/layout-primitives';
// or import '@inc2734/unitone-css/app';

Usage

<div data-unitone-layout="marquee-wrapper">
	<div data-unitone-layout="marquee">
		<img src="..." alt="" />
		<img src="..." alt="" />
		<img src="..." alt="" />
		<img src="..." alt="" />
		<img src="..." alt="" />
	</div>
</div>

Props

HTML -reverse / JSX reverse

Reverse direction.

<div data-unitone-layout="marquee-wrapper -reverse">
	<div data-unitone-layout="marquee">
		...
	</div>
</div>

HTML -pause-on-hover / JSX pauseOnHover

Pause on hover.

<div data-unitone-layout="marquee-wrapper -pause-on-hover">
	<div data-unitone-layout="marquee">
		...
	</div>
</div>

HTML --unitone--animation-duration / JSX duration={value}

Animation duration.

<div data-unitone-layout="marquee-wrapper" style="--unitone--animation-duration: 5s">
	<div data-unitone-layout="marquee">
		...
	</div>
</div>

HTML -gap:{variation} / JSX gap={variation}

Gap.

Can be set from -3 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

<div data-unitone-layout="marquee-wrapper">
	<div data-unitone-layout="marquee -gap:-2">
		...
	</div>
</div>

HTML --unitone--item-width / JSX itemWidth={value}

width of the items.

<div data-unitone-layout="marquee-wrapper" style="--unitone--item-width: 50px">
	<div data-unitone-layout="marquee">
		...
	</div>
</div>
Last updated on
LayersMasonry