Photo ring (tilted)
The same 3D photo ring as photo-ring for Bricks Builder, tilted and seen from outside the whole ring instead of from within it. It shares every other class with photo-ring and is published as its own template since the two views are separate options in the library.
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).
