import { Component } from '@angular/core';
import { WrMarquee } from 'ngwr/bits/marquee';
@Component({ imports: [WrMarquee] })
export class MyComponent {}Marquee
An endless scrolling row of logos, images or templates.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
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
Reduced motion
With prefers-reduced-motion, the strip stops and scrolls instead: one copy of the items, no edge fades, and a tab stop on the strip when no item has one. Since v15.
Types
What items accepts.
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;
title?: 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 | — |
title | Native tooltip on the image. | 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 | — |
title | Native tooltip on the rendered template. | 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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/marquee's own element.
| 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 |