Photo ring
A 3D photo ring for Bricks Builder, seen from inside: a centered intro with its button sits above a ring of photos that turns slowly, and a button pauses the turn. It holds still with reduced motion, and the photos' positions are worked out on their own instead of set by hand.
In the annual plan, $99/year. See plans
Uses a small script. Turn on Code execution in Bricks › Settings › Custom code. How to turn on Code execution
Preview
Loading demo…
Template details
What’s inside
The components it’s built from. They come with the template when you paste it, and you edit them from the Bricks panel.
- FBK Button
A link styled as a button, with style, size and width.
- FBK Intro
Eyebrow, title, lead and an actions slot for buttons.
Adjust it
Change these variables in Bricks to tune it; everything else follows your framework.
On the element Intro + ring + pause, class fbk-ring
- --fbk-t-radius
- min(31vw, 33em)
- --fbk-t-time
- 30s
- --fbk-t-ratio
- 5 / 6
- --fbk-t-n
- 10
- --fbk-t-i
- 0
- --fbk-t-room-top
- calc(var(--fbk-t-w) * 0.7)
- --fbk-t-room-bottom
- calc(var(--fbk-t-w) * 1.1)
Each photo: a share of the ring's length, less than its full share so there is a gap
- --fbk-t-w
- calc(var(--fbk-t-radius) * 6.2832 / var(--fbk-t-n) * 0.757)
The camera just inside the ring: the photos on the far side make a curved band across the page
- --fbk-t-tilt
- 0deg
- --fbk-t-perspective
- calc(var(--fbk-t-radius) * 0.952)
The band's height, with less room above and below
- --fbk-t-scene-h
- calc(var(--fbk-t-w) * 1.2)
The tilted ring draws lower than its box: room under it lifts it back to the middle
- --fbk-t-scene-pad
- 0px
Replaces
In Fancy Bricks 1.0 and 2.0 this was 3d Image Slider (2.0).
