FanGallery

<r-fan-gallery>APIStyle tokensPlaygroundSource

Fans its children out like a hand of cards. Each child turns about a point below the row, so the group reads as one object rather than a strip.

Use when a handful of covers, screenshots or cards should read as one set, and showing the whole of each one matters less than showing that there are several. For content a reader must compare side by side, use a grid instead.

Quick Start

Basic Usage

<r-fan-gallery>
  <a href="/one">1</a>
  <a href="/two">2</a>
  <a href="/three">3</a>
  <a href="/four">4</a>
</r-fan-gallery>

The children are your own elements. Links, buttons and images keep their roles, their names and their place in the tab order; the gallery only moves them.

Spread

spread is the angle in degrees between the first and last child. 0 lines them up on top of one another.

<r-fan-gallery spread="48">…</r-fan-gallery>

Motion

• Opening. Until the gallery first scrolls into view its children lie stacked, so the front one is readable from the start. When it arrives the fan opens with a spring, one child after another. It opens once per page; scrolling away and back does not replay it.
• Pointer and focus. The child under the pointer, or holding focus, lifts and comes to the front, and its neighbours turn a little aside. The response is immediate and a new gesture takes over from wherever the last one had got to.
• Reduced motion. With prefers-reduced-motion: reduce the fan is open from the start and every change is applied without a transition.

API Reference

Properties

Parts

Styling

The gallery is as tall as its tallest child. Turned corners overflow the stage, so leave room around it or raise --ran-fan-gallery-padding.

Playground