Logo Scroller

Basics

The logo scroller allows you to display a series of logos that scroll slowly across the screen.

Copy
html
<ap-logo-scroller>
    <img
        src="/assets/images/anglepoint-logo.svg"
        alt="Anglepoint"
        width="190"
        height="41"
    />
    <img
        src="/assets/images/icons/arrow-square.svg"
        alt="Arrow"
        width="46"
        height="46"
    />
    <img
        src="/assets/images/icons/close-circle.svg"
        alt="Close"
        width="100"
        height="100"
    />
    <img
        src="/assets/images/icons/correct.svg"
        alt="Correct"
        width="30"
        height="30"
    />
    <img
        src="/assets/images/icons/doc-icon.svg"
        alt="Document"
        width="20"
        height="25"
    />
    <img
        src="/assets/images/icons/funnel.svg"
        alt="Funnel"
        width="14"
        height="15"
    />
    <img
        src="/assets/images/icons/hamburger-menu.svg"
        alt="Menu"
        width="24"
        height="17"
    />
    <img
        src="/assets/images/icons/left-arrow.svg"
        alt="Left Arrow"
        width="17"
        height="14"
    />
    <img
        src="/assets/images/icons/search-icon.svg"
        alt="Search"
        width="16"
        height="16"
    />
    <img
        src="/assets/images/icons/select-dropdown-arrow.svg"
        alt="Select"
        width="42"
        height="58"
    />
    <img
        src="/assets/images/icons/yellow-square.svg"
        alt="Selected"
        width="10"
        height="10"
    />
    <img
        src="/assets/images/favicons/favicon.svg"
        alt="Favicon"
        width="41"
        height="41"
    />
</ap-logo-scroller>
Expand

Customization

The main thing you can customize on the logo scroller is what text displays. You can insert a <div> (or another semantic element that makes sense here) with a slot value of title as a direct child of the <ap-logo-scroller> element.

Copy
html
<ap-logo-scroller>
    <div slot="title">Some Title Here</div>
    <img
        src="/assets/images/anglepoint-logo.svg"
        alt="Anglepoint"
        width="190"
        height="41"
    />
    ...
</ap-logo-scroller>
Expand

The other thing you can configure is how much of a gap there is between images. By default, there's a 30px gap between images on phones and a 60px gap on larger devices. To change the gaps, you just need to provide an appropriate length value to respective attributes: phone-gap and/or desktop-gap.

Copy
html
<ap-logo-scroller phone-gap="10px" desktop-gap="20px">
    <img
        src="/assets/images/anglepoint-logo.svg"
        alt="Anglepoint"
        width="190"
        height="41"
    />
    ...
</ap-logo-scroller>
Expand

Caveats

1. Any child of <ap-logo-scroller> will be cloned into the Shadow DOM and then removed.
2. For images, if their loading attribute is set to lazy, this will get changed to eager. This is due to how some browsers interpret viewport intersection with the images based on the mechanism to move them, meaning that the images offscreen will never load despite being plainly in the viewport.