What is this web page background ad called and how does it work?

January 8, 2014 10:33 AM

On this page (HuffPo), I see a dynamic background ad for Chicago PD that changes as you scroll down. I noticed it because it defied my AdBlockPro. What is it called? How does it work?

It's not just a changing background, but there are different layers of animation present.

I used to be a web designer and left the industry before the really neat stuff started to happen. But I'm still amazed by the great things that I see. If I wanted to create something like this, where would I start, language-wise?

(This ad campaign might only run once per user as I had to clear cookies to see it again.)

posted by kimberussell to Computers & Internet (3 answers total)

I have seen this technique/ad unit referred to by marketing people as a "homepage takeover."
posted by jbickers at 10:43 AM on January 8, 2014

I can't see the ad itself, but the described technique is called "parallax scrolling". You can see some examples here or google the term for further references.
posted by KMB at 10:46 AM on January 8, 2014

They call it a "Reactive Wallpaper with Video Floater":

Reactive Spaces is the latest innovation in rich media. Built in HTML5 to take advantage of new capabilities of modern browsers and designed to combat banner blindness, Reactive Spaces creates a vibrant and fulfilling user experience that weaves organically into existing navigation habits. Ads spring to life as users scroll down the page, presenting advertisers with new and dynamic ways to engage with their audience. Exclusive to AOL, these are the only HTML5 wallpaper ads available on the marketplace.

The code is here.
posted by djb at 10:47 AM on January 8, 2014 [2 favorites]