Random Layout

Random Panel 1  ·  Seed 42

Random Layout

Each panel is placed at a random (X, Y, Z) position and gets a random rotation within the configured bounds. The layout is driven entirely by data attributes — no per-panel CSS needed.

<div class="foldpage"
     data-foldpage-view-layout="random"
     data-foldpage-view-layout-count="42"
     data-foldpage-view-layout-spacing=".4"
     data-foldpage-view-layout-spacing-y=".6"
     data-foldpage-view-layout-spacing-z=".2"
     data-foldpage-view-layout-offset-z="-700"
     data-foldpage-view-layout-rotation="360">
  <header data-foldpage-view="0">...</header>
  <section data-foldpage-view>...</section>
</div>

Random Panel 2  ·  Seed

Reproducible with Seed

count is reused as the PRNG seed for random layouts. Any positive integer produces a fixed scatter — same positions and rotations on every page load. Omit count (or set to 0) for a different layout each time.

/* Fixed layout — seed 42 */
data-foldpage-view-layout-count="42"

/* Different fixed layout — seed 7 */
data-foldpage-view-layout-count="7"

/* Unseeded — random each page load */
/* (omit count, or set to 0) */

Random Panel 3  ·  Scatter

Scatter & Offset

spacing sets the scatter range (700 px × spacing). offset-x/y/z shift all panels by a fixed amount before scatter — use offset-z to set a Z floor so panels are always behind the head view. The sign of spacing-y/z biases direction:

/* Push all panels 700px behind, scatter ±140px from there */
data-foldpage-view-layout-offset-z="-700"
data-foldpage-view-layout-spacing-z=".2"

/* Only below head top (Y > 0) + only behind (Z < 0) */
data-foldpage-view-layout-spacing-y=".6"
data-foldpage-view-layout-spacing-z=".8"

/* Narrow X, deep Z with fixed Z bias */
data-foldpage-view-layout-spacing-x=".5"
data-foldpage-view-layout-offset-z="-500"
data-foldpage-view-layout-spacing-z=".6"

Random Panel 4  ·  Rotation

Random Rotation

rotation sets the max rotation magnitude on all axes. rotation-x/y/z override per-axis. Each panel gets a random rotation uniformly distributed within ±value degrees.

/* ±30° on all axes */
data-foldpage-view-layout-rotation="30"

/* ±45° Y only (yaw) */
data-foldpage-view-layout-rotation-y="45"

/* ±15° X (pitch), ±60° Y (yaw), no Z */
data-foldpage-view-layout-rotation-x="15"
data-foldpage-view-layout-rotation-y="60"

/* Live update */
Fold.set({ viewLayout: { rotationY: 90 } });

Random Panel 5  ·  Head

Head View

With head="true" (default) the head view stays in normal document flow at its natural position. Panels scatter around it. With head="false" the head view is included in the scatter along with all other panels.

/* head=true (default) — head anchored, panels scatter */
data-foldpage-view-layout-head="true"

/* head=false — everything scatters including head */
data-foldpage-view-layout-head="false"

Random Panel 6  ·  JS API

JS API

Fold.init({
  viewLayout: {
    type:           'random',
    count:          42,       // seed
    spacing:        0.4,
    spacingY:       0.6,      // below head only
    spacingZ:       0.2,      // scatter ±140px around offsetZ
    offsetZ:        -700,     // push all panels 700px behind
    rotation:       360,      // ±360° all axes
    scrollDistance: 1000,
  }
});

/* Live update — re-computes with new seed */
Fold.set({ viewLayout: { count: 7 } });

See Grid Layout, Ring Inward, or all demos.