Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrMarquee } from 'ngwr/marquee';Playground
<wr-marquee
[items]="items"
[speed]="120"
[gap]="48"
[itemHeight]="36"
direction="left"
[pauseOnHover]="false"
[fadeOut]="true"
/>Customize
Speed (px/s)
Gap (px)
Item Height (px)
Direction
Pause on Hover
Fade Out
Types
Entry shapes accepted by [items].
type WrMarqueeItem = WrMarqueeImage | WrMarqueeNode;
interface WrMarqueeImage {
src: string;
alt?: string;
href?: string;
title?: string;
width?: number;
height?: number;
srcSet?: string;
sizes?: string;
}
interface WrMarqueeNode {
node: TemplateRef<unknown>;
href?: string;
ariaLabel?: string;
}| Name | Description | Type | Default |
|---|---|---|---|
WrMarqueeItem | Union of the two entry kinds below. | WrMarqueeImage | WrMarqueeNode | — |
WrMarqueeImage | Image-driven entry. | interface | — |
srcrequired | Image URL. | string | — |
alt | Alt text. | string | — |
href | Wraps the image in a link. | string | — |
width / height | Intrinsic size hints. | number | — |
srcSet / sizes | Responsive image attributes. | string | — |
WrMarqueeNode | Template-driven entry. | interface | — |
noderequired | Template rendered as the item. | TemplateRef<unknown> | — |
href | Wraps the template in a link. | string | — |
ariaLabel | Accessible label for the link. | string | — |
API
| Name | Description | Type | Default |
|---|---|---|---|
itemsrequired | Items to display. Each entry is either an image source or a TemplateRef node. | readonly WrMarqueeItem[] | — |
speed | Scroll speed in pixels per second. Negative reverses direction. | number | 120 |
direction | Track direction. | 'left' | 'right' | 'left' |
itemHeight | Item height in pixels. | number | 28 |
gap | Gap between items in pixels. | number | 32 |
pauseOnHover | Pause the loop on hover. | boolean | false |
hoverSpeed | Custom speed (px/s) when hovered. Overrides pauseOnHover. | number | undefined | undefined |
fadeOut | Apply edge fade-out gradients. | boolean | false |
fadeOutColor | CSS colour for the fade-out gradient. Defaults to the page background. | string | '' |
scaleOnHover | Scale individual items up on hover. | boolean | false |
ariaLabel | Accessible name for the region. Falls back to marquee.label, then 'Marquee'. | string | null | null |
CSS variables
Custom properties ngwr/marquee publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-marquee-fade-color-auto | var(--wr-color-surface, #ffffff) | .wr-marquee |
--wr-marquee-gap | 32px | .wr-marquee |
--wr-marquee-height | 28px | .wr-marquee |