JL

L'Oréal

Dual-format ad for L'Oreal Feria hair color. Collapsed leave-behind teaser expands into a full-screen interactive shade picker with browsing, video, and purchase CTAs.

  • html5
  • css3
  • javascript
  • gsap
Format
Leave-Behind + Page Grabber
Platform
Desktop + Mobile
Engine
Swiper 3.0.7
Agency
Undertone

How It Works

1
Persistent

Leave-Behind

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

Expand

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

Color Picker

Shade picker covers black, violet, copper, platinum, and red. Each shade has a slide, model imagery, and a video popup.
4
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.
  • 5
    shades

    Color Backgrounds

    Five shade slides (black, violet, copper, platinum, red). Intro animations exist for copper, platinum, and black. Each slide background is a full-bleed image 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.

More projects

Grey GooseView project

Grey Goose

Split-panel Grey Goose ad with the bottle and brand story on the left and a four-tab cocktail menu on the right

html5

Get in touch

Email me

Working end to end across design, creative, and engineering, where creativity, collaboration, and ownership build toward the company's goals.

jeffkliu@gmail.com