Field guide · behavior / item b

Seven ways to place the same creative.

A behavior re-shapes the host box — how the placement lives in the page — and never touches the creative, so any renderer can be an interscroller, an expandable or a skin by configuration alone. Scroll: this page is one long article and every ad in it is a live SDK unit. Unknown behaviors and impossible contexts degrade to a plain render — an ad is never broken by its behavior.

Publishers reach for behaviors when a plain rectangle stops earning attention. The trick is doing it without wrecking the reading experience — which is exactly what each pattern below negotiates in its own way. Watch the event chips as you scroll and interact.

1 · Interscroller

Industry names: Interscroller, Scroll, Dynamic Reveal.

Good for: high-impact mobile takeover without stealing the page. The host becomes a clipped window (default 80vh) and the creative is pinned behind it, revealed by the reader's own scrolling — no timers, no autoplay, pure CSS on the fast path. It even keeps working under reduced motion, because the scroll is the animation.

OcambaDisplay.slot({ zone: '…', behavior: 'interscroller' })
// or declarative: <div class="axocmba" data-slot="z/s" data-behavior="interscroller">
// window height: config h (px) — default 80vh

A second window height (h: 420) for subtler in-article use:

The clip window observes viewability on the in-flow host — never the pinned layer — so measurement stays honest. That rule holds for every behavior on this page: the observed element is always the box that participates in layout.

2 · Expand trigger: click

Industry names: Expandable Banner, Expand, Corner, Toplayer Reveal.

Good for: big-canvas storytelling that stays polite. The collapsed unit keeps its layout box; the dedicated ⤢ control grows the creative over the page (clicks on the creative itself stay clickthroughs), ⤡ collapses it back. Watch for expand / collapse in the chip.

OcambaDisplay.slot({ zone: '…', behavior: 'expand', expand: '600x500' })
// expanded size: config expand 'WxH' — or server item w2/h2

3 · Pushdown trigger: view

Industry names: Pushdown, In-Article, Viewable Billboard, Push Up Footer.

Good for: billboard impact only when actually seen. Same triggers as expand, but the host box itself animates and the page content reflows. This one uses trigger:'view' — it grows automatically, once per page view, the moment it's 50% visible. Scrolling past it again won't re-fire.

OcambaDisplay.slot({ zone: '…', behavior: 'pushdown', trigger: 'view', expand: '970x415' })
// = the "viewable-expand" recipe: server b:"pushdown" + slot data-trigger="view"

Between the big formats, the article keeps breathing. That's deliberate: behaviors earn their keep only when the surrounding content still reads naturally — a page that is all takeover is just a slower interstitial.

4 · Float

Industry names: Viewable Sticky Ads, corner adhesion.

Good for: keeping one paid impression viewable while the reader moves on. The host keeps its box as a placeholder; scrolled out of view, the creative docks to a corner (scaled, ≤ 320 px), and returns inline when the placeholder is visible again. ✕ dismisses it for the page. Chip logs float / unfloat. Pick a corner and scroll past:

OcambaDisplay.slot({ zone: '…', behavior: 'float', floatPos: 'br' })  // br | bl | tr | tl

Float and the next two patterns pin elements to the viewport, which is impossible from inside a cross-origin frame — when the SDK runs framed they simply render plain and file a report. The same goes for a transform/filter ancestor, which hijacks position:fixed: that's a placement requirement on the page, not something the SDK detects.

5 · Reveal composed with an anchor container

Industry names: Scroll Reveal, Rollband.

Good for: a strip that respects reading direction — it slides in when you scroll down (leaning forward, receptive) and hides when you scroll up (hunting for something). Composed here with container:{mode:'anchor'} for the classic rollband. Direction flips for position:'top'. Chip logs reveal / conceal. Runs on demand so the two edges don't fight:

OcambaDisplay.slot({ zone: '…', behavior: 'reveal',
  container: { mode: 'anchor', position: 'bottom' } })  // rollband

6 · Parallax

Industry name: Parallax.

Good for: depth without takeover — the creative (oversized by depth) counter-translates while its window crosses the viewport. At depth: 0 it's a plain banner; at 1 the creative slides a full extra height. Static under reduced motion. Drag, then scroll:

depth · 0.3

OcambaDisplay.slot({ zone: '…', behavior: 'parallax', depth: 0.3 })  // 0..1

7 · Skin

Industry names: Background Image, HTML5 Background, Multimedia Screening / wallpaper.

Good for: the full brand moment. The host goes fixed full-viewport at z-index:-1 behind the page. The publisher contract is visible right here: this article column keeps its own opaque background, the page body stays transparent. Compose with a billboard slot on top for a complete "screening".

OcambaDisplay.slot({ zone: '…', behavior: 'skin' })
// contract: content column opaque, body background transparent

8 · Server-driven `b` — and who wins

Good for: running any of the above with zero page changes — the ad server attaches b (and w2/h2) to the item itself. This slot has no behavior config at all; the pushdown comes entirely from the server response:

// server item — no client config needed:
{ "r": "…", "l": "banner", "b": "pushdown", "w2": 970, "h2": 415, "md": { … } }

Precedence: client config always wins. The same server item, but the slot says behavior:'float' — and floats:

Degradations — the safety net

Inside a cross-origin frame the fixed behaviors (interscroller, float, skin) no-op and the ad renders plain, with a behavior report. Under prefers-reduced-motion: parallax renders static, reveal stays shown, expand/float transitions become instant — and the interscroller keeps working, because the reveal is the user's own scrolling. Unknown behavior names degrade to a plain render. An ad is never broken by its behavior.