Image Cycle (Divi)

A ring of photo cards around a headline, for Divi 5. The cards fly in, gather and open into a ring, then keep spinning (or follow the scroll) while cards flip to show the rest of the set. Every example below is labelled with its settings; reload the page to replay the entrances at the top.

1. Orbit — the default

Entrance: Orbit from the bottom, on page load, 1 s, stagger 0.1 s, cards start 3× bigger · ring 260 px (220 on tablets, 140 on phones), cards pointing outward, spinning clockwise once every 30 s and pausing while a card is hovered · a random card flips every 2 s to another image from the set · Headline: two lines, subtitle, text and a button; blur reveal.

2. Four more entrances

Split — from both sides into two arcs · Bloom — bursts out from the centre · Spiral — winds out · Drop — falls into place one by one. Each starts when scrolled into view, 440 px high with a 150 px ring and 60 px cards.

3. A 3D orbit that follows the scroll

Rotation: Follow the page scroll (1.5 turns while it passes) · Ellipse 0.35 (cards at the back shrink and dim) · 3D tilt 55° · cards upright · Brighten on hover · 3:4 cards 110 px wide, 380 px ring · headline below the cards passes behind them (Headline Above Cards off) · Orbit entrance from the left.

4. Card backs, shapes and links

Left: backs in a solid navy colour · all cards flip together every 3 s · square cards pointing inward · 12 px radius, white 3 px border. Right: the same image mirrored on the back · flips go round the ring every 1.5 s · 9:16 cards · each card links somewhere (Card Links, one per line) · no rotation · Rise reveal.

5. Finished design

A dark hero: a gradient title (amber → pink), a glass headline box with a 24 px radius and padding, 104 px 3:4 cards with a soft shadow, a 285 px ring spinning counter-clockwise every 50 s, a pill button that turns white on hover, a navy gradient box with a 32 px radius. On phones: 540 px high, 60 px cards, a 150 px ring, a 46 px title and a narrower headline.