Marvel: Guardians of the Galaxy

Overview

FormatPage Grabber

PlatformMobile + Desktop

EngineGreenSock + Parallax.js

AgencyUndertone

Parallax rich media ad for the Guardians of the Galaxy theatrical release. Layers of artwork shift based on device gyroscope input, or mouse position on desktop, creating a diorama effect. Users can "look around" the scene by tilting their phone. The gyroscope-to-parallax translation required smooth interpolation to prevent jitter. Full-screen ad for the Guardians of the Galaxy theatrical release. Multiple layers of character artwork shift in response to device tilt (gyroscope) or mouse position (desktop), creating a diorama-style depth effect. The result feels like looking through a window into the Marvel universe.

Hand-coded from scratch as part of a premium creative engineering team. Every ad was built: no template tools, no WYSIWYG editors.

How It Works

~2s

Load

Page Grabber expands. Layers initialize with z-depth ordering. Calibration starts on mobile devices.

500ms

Calibrate

Gyroscope samples initial tilt angle. 100-threshold gate ensures the device is held steady before accepting input.

Interactive

Parallax

Layers shift at different rates based on depth. Friction smooths raw gyro data. Desktop uses cursor position with scalar mapping.

End State

CTA

Ticket purchase CTA and trailer link overlay the parallax scene. Click tracking fires through the ad platform.

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.

Engineering Decisions

Scroll-based parallax doesn't work inside an ad iframe: the ad is the viewport. Device motion creates a richer effect and works within the ad container constraints.

Raw DeviceOrientation data jitters. Applying 0.1 friction per axis creates smooth, cinematic layer movement without visible frame-by-frame jumps.

Layers are pre-positioned in markup with class="layer". Parallax.js reads depth from DOM order, eliminating runtime z-index calculations.

Ad platforms serve to thousands of publisher sites. Separate compiled CSS files (index.resp.min.css, index.nonresp.min.css) let the ad server choose the right bundle at serve time.