Filmstrip Component Breakdown

Overview

The dd-filmstrip component provides a marque like section that has an infinite scroll with a pause effect on hover.

This component is ideal for showing logos or small thumbnail images that continually scroll.

Basic Usage

Wrap the Filmstrip in a div with class dd-filmstrip. Use an unordered list to show images.

Preview

1
2
3
4
5
6

1
2
3
4
5
6

Code

<div class="dd-filmstrip">
  <ul class="dd-filmstrip__content">
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>1</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>2</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>3</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>4</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>5</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>6</figure>
    </li>
  </ul>

  <ul aria-hidden="true" class="dd-filmstrip__content">
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>1</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>2</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>3</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>4</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>5</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>6</figure>
    </li>
  </ul>
</div>

<div class="spacer -divider"></div>

<div class="dd-filmstrip -reverse">
  <ul class="dd-filmstrip__content">
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>1</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>2</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>3</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>4</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>5</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>6</figure>
    </li>
  </ul>

  <ul aria-hidden="true" class="dd-filmstrip__content">
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>1</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>2</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>3</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>4</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>5</figure>
    </li>
    <li>
      <img src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC. logo" />
      <figure>6</figure>
    </li>
  </ul>
</div>

Use responsive image for mobile.

CSS Modifiers (from _dd_filmstrip.scss)

The SCSS file defines base styles for the Filmstrip, animation direction. Key modifiers for .dd-filmstrip include:

-reverset: reverse the play head.

Framework files

source/scss/components/_dd_filmstrip.scss (styles)

For ACF/Paragraphs integration, map fields to generate inline styles and classes dynamically.

Accessibility and Best Practices

Ensure overlay text contrasts with background (use borders/opacity). Provide alt text for images if visible. In CMS, validate background images for required fields and enforce contrast checks if possible.