“The Escalator”

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Patrick Stirling of The Guardian shows off some new ads formats they are using. The first two look like they are just using some @media queries to shuffle things around and resize them. I wasn’t able to find a live one to look under the hood at though. It would be really neat to see SVG be used for these because 1) you could make it nicely accessible with real text 2) The scale-and-maintain-proportions ability (even text) would seem appealing. 3) SVG-as-<img> has its own viewport, so contained @media queries work could be based on how wide the ad is, not how wide the screen is.

The third, “The Escalator”, is a clever one where the whole ad is revealed only as you scroll. Looks like probably some background-attachment: fixed; action.

I always dig it when companies write about their thinking behind new design. Here’s another good example of that from this week.

Direct Link →