How to build this type of banner ad?

April 2, 2014 12:09 PM

I need to create a collapsing web ad, similar to the specific one hosted on the homepage of ajc.com. Are there tutorials to do this?

Specifically, it's the large banner ad that appears when you first open the home page, which then shrinks to a pencil banner. Is this a Flash thing or Javascript? Talk to me like I'm barely aware of how web ads are built, because its true! The boss has suddenly feels we absolutely need to know how to do this, despite not having a dedicated web person.

posted by sock, the puppet to Computers & Internet (4 answers total)

Best answer: The name for that format of ad is "push down." Depending on which CMS you are using, there is likely an out-of-the-box plugin that will do it for you.
posted by jbickers at 12:19 PM on April 2, 2014

Response by poster: Ah, a push down! The boss was referring to them as collapsing banners, so I thought that's what they were called. We're using Google DFP for Small Publishers.
posted by sock, the puppet at 12:28 PM on April 2, 2014

Best answer: I'll tell you first it's not Flash, it's javascript.

Second, I'll preach inappropriately for a moment and mention it's horrible from a usability standpoint (imagine you're reading something below the ad, and then the ad collapses, and the thing you were reading is now somewhere else). But, IME, that's not an argument that wins over bosses who just want to promote something.

Anyway: I whipped up a demo of the sort of thing you're looking for: http://cdpn.io/JeFay
posted by o2b at 12:31 PM on April 2, 2014 [1 favorite]

Best answer: Update: Here's a CodePen link to the editor panel, which shows you all the bits and pieces: http://codepen.io/murtaugh/pen/JeFay
posted by o2b at 12:32 PM on April 2, 2014