Marquee

Displays child elements in a continuous horizontal scrolling format.

Usage


<div data-unitone-layout="marquee">
	<img src="https://placehold.jp/100x60.jpg" alt="" />
	<img src="https://placehold.jp/100x60.jpg" alt="" />
	<img src="https://placehold.jp/100x60.jpg" alt="" />
	<img src="https://placehold.jp/100x60.jpg" alt="" />
	<img src="https://placehold.jp/100x60.jpg" alt="" />
</div>

Props

HTML -reverse / JSX reverse

Reverse direction.


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


import { Masonry } from '@inc2734/unitone-css';
 
<Masonry reverse>
	...
</Masonry>

HTML -pause-on-hover / JSX pauseOnHover

Pause on hover.


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


import { Masonry } from '@inc2734/unitone-css';
 
<Masonry pauseOnHover>
	...
</Masonry>

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

Animation duration.


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


import { Marquee } from '@inc2734/unitone-css';
 
<Marquee duration="5s">
	...
</Marquee>

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

Gap.

Can be set from -2 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="masonry -gap:-2">
	...
</div>


import { Marquee } from '@inc2734/unitone-css';
 
<Marquee gap={1}>
	...
</Marquee>

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

width of the items.


<div data-unitone-layout="marquee" style="--unitone--item-width: 50px">
	...
</div>


import { Marquee } from '@inc2734/unitone-css';
 
<Marquee itemWidth="50px">
	...
</Marquee>