No. 04 · Section · v1.0.0
Cadence
Four photos to a frame.
A row of category cards that each cycle their own photos in a staggered wave.
Code complete · live Shopify store test pendingPreview shown with demonstration products and imagery from a fictional store, to show how the section can look once installed and configured. Included files and features are detailed below. The demo bag doesn't touch your Maisonblock bag.
What it does
Cadence shows up to eight cards, each cycling up to four images. Cards start a beat apart so the row ripples rather than flashing at once. Choose fade, dissolve, slide left or slide right.
Features
- Up to 4 images per card, up to 8 cards
- Fade, dissolve, slide left or slide right
- Staggered timing
- Pauses on hover, off screen and in hidden tabs
- Stops for reduced motion
You'll need
- Two to four images per card
Configuration options
Every setting this piece adds to the theme editor, read straight from its code; up to 8 blocks.
| Theme-editor setting | Type | Default |
|---|---|---|
| Cards per row (desktop) | range | 4 |
| Animation | select | dissolve |
| Change image every | range | 2.4 |
| Transition speed | range | 800 |
| Background | color | #f1f1f1 |
| Section padding | range | 40 |
| Each “Card” block | ||
| Title | text | — |
| Image 1 | image picker | — |
| Image 2 | image picker | — |
| Image 3 | image picker | — |
| Image 4 | image picker | — |
| Link label | text | Shop now |
| Link | url | — |
Screens
On desktop and phone
Every image is a capture of the live demo above, unedited. Demo store, products and photography are examples (photos: Unsplash and Pexels).
Questions about Cadence
Does it slow the page?
The script is about 2 KB, images after the first load lazily, and nothing runs while the section is off screen.
More from the house
