Perspective Scrolling
A 3D marquee of columns scrolling through a tilted plane, with mouse tilt and parallax.
Perspective Scrolling is the showpiece layout. Your images become columns on a plane tilted in 3D space; the columns scroll continuously, the plane responds to the pointer, and the whole thing loops forever.
When to use it
- A hero band at the top of a landing page.
- A brand or agency site that needs one moment of spectacle.
- A background element behind a headline.
It is not a browsing layout. Images scroll past, so nothing stays put long enough to study. For a gallery people are meant to look through, use one of the other six.
Perspective is a self-contained layout
Its runtime rebuilds the grid into a rotated plane and clones every tile to loop the scroll, so the panels that assume a static page of tiles are hidden: Order, Ajax Pagination, Image Filter & Search and Motion Effects.
It does keep Image Click Action — its tiles are ordinary lightbox links — plus Image & Video Settings, Content Settings (Overlay only) and Advanced Settings. Its gaps and columns are shown in its own order, inside its own control list.
Its own settings
In the Figma-ordered list the panel draws:
The stage
| Control | What it does | Default |
|---|---|---|
| Gallery Size | The 3D stage's W and H in pixels, responsive. Leave W empty for Auto — the full container width. | Auto × 700 |
| Mode | Wall stands the plane up facing the viewer. Table lays it back like a surface seen from above. Flat removes the tilt. | Table |
| Slide Direction | Which way the columns travel: Up or Down. | Up |
| Slide Speed | How long one cycle takes, 0–10 s in steps of 0.5. Lower is faster; 0 stops the motion. | 3 |
The grid on that stage
| Control | What it does | Default |
|---|---|---|
| Columns | How many scrolling columns. Responsive, 1–8. | 4 / 3 / 2 |
| Horizontal Gap · Vertical Gap | Spacing between tiles. Responsive, 0–60. | 15 px |
The 3D transform
| Control | What it does | Default |
|---|---|---|
| Perspective | How strong the 3D foreshortening is, 0–2500 in steps of 10. Lower is more dramatic; higher flattens it. Responsive. | 800 px |
| Rotate X | Tilt forward/back, −180° to 180°. Responsive. | 0 |
| Rotate Y | Turn left/right, −180° to 180°. Responsive. | 0 |
| Rotate Z | Roll, −180° to 180°. Responsive. | 0 |
Finishing
| Control | What it does | Default |
|---|---|---|
| Edge Fade | Soften the edges where columns enter and leave the stage. | Off |
| Alternate Column Direction | Scroll every other column the opposite way. | Off |
| Mouse Tilt (Parallax) | Let the plane lean toward the pointer. | On |
| Mouse Parallax | How strongly it leans, 0–2 in steps of 0.1. 0 disables the lean while leaving the toggle on. | 1 |
Recipes
A calm background band. Table mode, Slide Speed 6–8, Edge Fade on, Mouse Tilt off, Gallery Size height 400–500. It moves enough to feel alive without competing with the text in front of it.
A front-facing hero wall. Wall mode, Rotate Y around −15°, Perspective 900–1200, Alternate Column Direction on. The counter-scrolling columns are what make it read as depth rather than as a moving picture.
Maximum drama. Table mode, Perspective 400–600, Rotate X 10–20°, Mouse Parallax 1.5. Use eight or ten strong images, not forty weak ones.
Things worth knowing
Motion costs battery. A continuously animating 3D element is the most expensive thing this plugin can put on a page. One per page, and preferably above the fold where it earns its keep.
Turn it down for people who ask. Visitors with "reduce motion" set in their operating system get a calmer treatment automatically. That doesn't make continuous motion a free choice — see Accessibility.
Captions are overlaid. The Content Display Style control isn't shown here: a caption block on a rotating plane would be skewed with it, duplicated across every looped clone, and scrolled past before it could be read. Content is drawn as an overlay instead, and your stored Classic setting is preserved for other layouts.
Tiles are cloned to loop. Every tile is duplicated so the columns can scroll forever without a seam. The lightbox knows about this and de-duplicates, so clicking the third image opens the third image — not a clone with a different index.
Keep the set small. Ten to twenty images is plenty. More doesn't add depth; it adds download.