Scroll Sequence (Divi)
Image sequences drawn on a canvas for Divi 5 and scrubbed by the scroll — like a product turning or a jacket being built. These demos use the shop’s own photos as frames; real sequences are 30–150 frames of one shot. Each is labelled with its settings. Scroll slowly.
1. Pinned — stays on screen while you scroll through it
Source: Media Library images (the 14 shop photos, in order) · pinned for 300 vh (220 vh on phones) · smoothing 0.75 · three Text Overlay modules at 5–30 %, 38–62 % and 70–100 % with fade-up, blur and zoom entrances · a progress bar and a frame counter · pinned 54 px down, below Divi’s fixed header.
2. Inline — plays while it crosses the screen
Left: Source: Numbered files in a folder — uploads/2026/11/frames/Apparel-1.jpg … Apparel-3.jpg (prefix “Apparel-”, 1 digit, 3 frames) · whole frame (contain) · starts when its top reaches the bottom of the screen and finishes at the top. On phones it switches to its own frame set (Apparel-Women-1 … 3). Right: the same folder, only moving forward, played backwards, 1:1.
3. Driven by time or the pointer
Left: Time — plays on its own at 3 frames a second, back and forth, while visible. Right: Pointer — move across it (or use the arrow keys) to scrub; vignette shade.
4. Background of its section
Layout: Background of its section — the sequence fills this whole section and the text rows scroll over it (four frames, a navy shade). Keep scrolling: the frames change behind the text.
Two front and back shots, turning as you read.
Any Divi content can sit on top — text, buttons, other modules.
5. Styled from the Design tab, on a dark background
Stage: 80 vh high, a 28 px radius and a shadow · frames in black and white (saturation 0 %) · overlays with a glass panel, 440 px wide and 60 px from the edges · heading, text and button fonts · button colours · a thicker yellow bar.
