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
PersistentLeave-Behind
Collapsed teaser sits on the publisher page: logo, model image, Feria text, "Find Your Feria" CTA, and "Live in Color" tagline.
2
~1sExpand
Tapping the teaser expands to full-screen creative. Logo repositions. Intro animation plays with color-specific backgrounds.
3
InteractiveColor Picker
Shade picker covers black, violet, copper, platinum, and red. Each shade has a slide, model imagery, and a video popup.
4
InteractiveVideo
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.- 5shades
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
Get in touch
From idea to production across design, creative, and engineering. I ship end to end, and the vision stays company-first the whole way.
jeffkliu@gmail.com