Marvel Avengers (Target)

Parallax rich-media ad for Target's Marvel Avengers line. Layers of hero art shift with device gyroscope input (or mouse on desktop) for a diorama effect, with an embedded trailer and a Gear Up click-through.

html5
css3
javascript
gsap

Format: Page Grabber
Platform: Mobile + Desktop
Engine: GreenSock + Parallax.js
Agency: Undertone

How It Works

~2s

Load

Page Grabber expands and the layers initialize in z-depth order.

500ms

Calibrate

Gyroscope samples the initial tilt so motion reads from a steady baseline.

Interactive

Parallax

Layers shift by depth as the device tilts; desktop uses cursor position.

End State

CTA

Gear Up and trailer CTAs overlay the scene, with click tracking.

Engineering

Parallax Depth Engine
Parallax.js with configurable scalarX/scalarY (10.0 default), frictionX/frictionY (0.1), and inversion controls. Each layer shifts at a rate proportional to its z-index.
Gyroscope Integration
DeviceOrientation API reads beta/gamma angles, calibrated against the initial holding position. Automatic fallback to cursor-position tracking on desktop or devices without gyroscope.
Animation Layer
GreenSock handles all transitions: layer entrance, CTA fades, and the smooth interpolation between gyro samples to prevent jitter.
Platform Integration
the ad platform SDK for impression tracking, click attribution, and auto-close lifecycle. Responsive CSS with separate compiled stylesheets for responsive and non-responsive viewports.