L'Oréal

Overview

FormatLeave-Behind + Page Grabber

PlatformDesktop + Mobile

EngineSwiper 3.0.7

AgencyUndertone

Dual-format ad for L'Oreal Feria hair color. The campaign starts as a collapsed leave-behind teaser on the publisher page: model imagery, Feria branding, and a "Find Your Feria" CTA. Tapping expands into the full-screen color picker experience where users swipe through hair color shades (copper, platinum, black), watch the brand video, and click through to purchase.

This was a beauty-vertical campaign where color accuracy was paramount. Every shade had to match the physical product packaging.

How It Works

Persistent

Leave-Behind

Collapsed teaser sits on the publisher page: logo, model image, Feria text, "Find Your Feria" CTA, and "Live in Color" tagline.

~1s

Expand

Tapping the teaser expands to full-screen creative. Logo repositions. Intro animation plays with color-specific backgrounds.

Interactive

Color Picker

Color picker page with copper, platinum, and black shade backgrounds. Each shade has its own intro animation and model imagery. Video popup available per shade.

Interactive

Video

Video player opens in an overlay popup with close button. Equity video plays within a contained div that doesn't affect the color picker state.

Engineering

Swiper Color Gallery

Swiper 3.0.7 powers the shade-browsing carousel with hardware-accelerated CSS transforms and momentum-based touch scrolling.

Leave-Behind Format

Two-state creative: leaveBehind div (collapsed, ut_open trigger) and expandedCreative div (full-screen, ut_close trigger). Separate DOM trees, separate asset loading.

Color Backgrounds

Three shade-specific background divs (copper, platinum, black) swap visibility via CSS class toggling. Each background is a full-bleed image, not a CSS color: matching product packaging.

Video Popup

Overlay popup (popUpOverlay) with contained video player (VIDEO_EQUITY). Close button and background click both dismiss. Video cleanup runs on close to prevent background audio.

Engineering Decisions

Not every publisher allows full-page takeover on load. The leave-behind format earns user opt-in: the teaser creates interest, the expansion delivers the experience.

In 2015, scroll-snap had no mobile Safari support. Swiper provided tested momentum scrolling with hardware acceleration across all targets.

Hair color shades have complex gradients and textures. A CSS hex code can't represent the metallic copper or the cool platinum sheen. Full-bleed product photography ensures accuracy.

The leave-behind and expanded creative have different layouts, different asset sets, and different click tracking. Sharing DOM would create complex conditional CSS.