Ring Layout

Slot 0  ·  North  ·  θ = 0°

Ring Layout

The ring view-layout type positions panels in a circle around the first view. No manual CSS transforms on the panels — two data attributes on the wrapper are all that's needed.

<div class="foldpage"
     data-foldpage-view-layout="ring"
     data-foldpage-view-layout-count="6">

  <header data-foldpage-view="0">...</header>  <!-- center -->
  <section data-foldpage-view>...</section>  <!-- slot 0 -->
  <section data-foldpage-view>...</section>  <!-- slot 1 -->
  <!-- ... -->
</div>

Slot 1  ·  Northeast  ·  θ = 60°

Generic + Ring Params

All layout options share the same data-foldpage-view-layout-* prefix — no layout-type-specific namespacing.

/* Layout type — on the container */
data-foldpage-view-layout="ring"

/* Layout options — shared prefix for all layout types */
data-foldpage-view-layout-spacing="1.0"       /* base radius multiplier */
data-foldpage-view-layout-count="6"            /* total slots */
data-foldpage-view-layout-start="0"             /* first slot angle (deg) */
data-foldpage-view-layout-direction="row"        /* row | row-reverse */
data-foldpage-view-layout-empty="5,6,7"         /* empty slot indices */
data-foldpage-view-layout-scroll-distance="1000" /* px per view transition */
data-foldpage-view-layout-top="300"             /* px override (auto by default) */

Slot 2  ·  Southeast  ·  θ = 120°

Auto Positioning

The layout service injects position: absolute on each panel, centering them at the same screen Y (auto-computed from the center view's bottom edge). The translateX and translateZ values scatter them around the ring.

A scroll spacer is appended automatically — height = panels × scrollDistance. Overridable with data-foldpage-view-layout-scroll-distance.

/* What the layout injects on each panel (via style attribute) */
position:    absolute;
top:         Npx;            /* auto from centerEl.bottom + 40px */
left:        0;
right:       0;
margin-left: auto;
margin-right:auto;
transform:   translateX(X) translateZ(Z) rotateY(β);

Slot 3  ·  South  ·  θ = 180°

Inward Facing

Default facing is inward: the camera sits outside the ring looking in, with the logo visible in the distance. The auto-rotation is β = 180° − θ for each slot.

To flip any panel outward, add an inline transform on that element — the layout composes it on top:

/* Flip this panel to outward-facing */
<section data-foldpage-view
         style="transform: rotateY(180deg)">

/* Make all panels outward (camera inside the ring) */
.panel { transform: rotateY(180deg); }

Slot 4  ·  Southwest  ·  θ = 240°

Strength & JS API

strength scales the ring radius (1.0 = 700 px). Use the JS API for programmatic control or runtime changes:

/* Fold.init — data attrs take precedence */
Fold.init({
  viewLayout: {
    type:           'ring',
    strength:       1.5,   /* 1050px radius */
    spaces:         6,
    start:          0,
    direction:      'row',
    empty:          [5],   /* leave last slot empty */
    scrollDistance: 1000,
  }
});

/* Live update — patches transforms in place */
Fold.set({ viewLayout: { strength: 0.8 } });

Slot 5  ·  Northwest  ·  θ = 300°

Complete Template

<div class="foldpage"
     data-foldpage-view-layout="ring"
     data-foldpage-view-layout-count="6">

  <!-- center view (view="0") -->
  <header data-foldpage-view="0">...</header>

  <!-- ring panels — no position or transform CSS needed -->
  <section data-foldpage-view>N</section>
  <section data-foldpage-view>NE</section>
  <section data-foldpage-view>SE</section>
  <section data-foldpage-view>S</section>
  <section data-foldpage-view>SW</section>
  <section data-foldpage-view>NW</section>

</div>

<script>
  Fold.init({ foldpage: true });
</script>

See Ring Outward and Ring Arc for facing and arc variations, or all demos.