Scroll Banner

Display a series of images with infinite scroll

Use the ScrollBanner component to display horizontally infinitely scrolling images. They’re space efficient and can draw attention to highlight images, most notably partner or client logos, certification, or awards to build credibility and trustworthiness.

Preview - hover to stop the scroll

---
const images = [
    {
        src: '/img/logo.svg',
        alt: 'Logo',
        width: 125,
        height: 200
    },
    { ... }
]
---

<ScrollBanner images={images} />

The ScrollBanner component expects a single images prop that describes images in the form of an array of objects. Each object can have the following properties:

• src: Sets the path to the image.
• alt: Sets an alternate text for the image.
• width and height: Sets the width and height of the image.
• lazy: Optionally, you can set the lazy property to true to lazy-load the image.

Image Size

You can customize the size of the banner by setting the imageSize prop on the component. By default, the height of the images are set to 40px:

Custom image size

<ScrollBanner images={[ ... ]} imageSize={25} />

Animation

The animation of the ScrollBanner component can be configured in many different ways. Use the following props to disable or customize the way your animation works:

• animate: Set to false to disable animation. Enabled by default.
• animationSpeed: Sets the animation speed. One revolution takes 30 seconds by default.
• reverse: Reverses the direction of the scroll.
• stopOnHover: Sets whether the animation should be stopped on hover. Enabled by default.

No animation

Speed set to 15s

Reverse

<ScrollBanner images={[ ... ]} animate={false} />

<ScrollBanner images={[ ... ]} animationSpeed={15} />

<ScrollBanner images={[ ... ]} reverse={true} />

Shadows

The component uses a fade-in, fade-out effect using shadows on each side. The size of the shadows can be customized or even turned off using the shadows and shadowWidth props:

No shadows

Shadow width set to 100px

<ScrollBanner images={[ ... ]} shadows={false} />

<ScrollBanner images={[ ... ]} shadowWidth={100} />

Desaturated

The component can also be create with a desaturated effect using the desaturated prop:

Default

Desaturated

<ScrollBanner images={[ ... ]} desaturated={true} />

Configure With CSS

Some of the above configurations can also be configured using CSS variables, such as the image size, animation speed, and shadow width. If you need consistent styles across all of your ScrollBanner components, prefer overriding the following CSS variables once:

html body {
    --w-scroll-banner-img-size: 40px;
    --w-scroll-banner-animation-speed: 30s;
    --w-scroll-banner-shadow-width: 50px;
}

API

type ScrollBannerProps = {
    images: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }[]
    imageSize?: number,
    animate?: boolean
    animationSpeed?: number
    reverse?: boolean
    shadows?: boolean
    shadowWidth?: number
    stopOnHover?: boolean
    desaturated?: boolean
    className?: string
}