The Mad Magazine Fold-In Effect in CSS

June 12, 2020 7:30 PM

The Mad Magazine Fold-In Effect in CSS After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of examples can be found on the web. The problem is, they all show the before and after statically, side by side, which diminishes the magic (see here and here). There’s a whole generation who may have only seen the fold-ins in this format.
Of course I had to create the paper folding effect for the web.
[via mefi projects] Previously
posted by Going To Maine (19 comments total)

This is really cool, thanks for posting!

So many hours spent staring at fold-in and the margin drawings of Mad. So many.
posted by fifteen schnitzengruben is my limit at 7:57 PM on June 12, 2020 [4 favorites]

I wish the examples were bigger. But cool.
posted by zengargoyle at 8:06 PM on June 12, 2020 [2 favorites]

This is SO COOL.
posted by Homo neanderthalensis at 8:24 PM on June 12, 2020

As a person who last did any serious work with CSS ten years ago: what is this sorcery? Who put 3D animation in here, that isn't what CSS is for!
posted by JDHarper at 9:03 PM on June 12, 2020 [1 favorite]

(to be clear this is really cool, in case that came across as grumpy)
posted by JDHarper at 9:14 PM on June 12, 2020 [1 favorite]

Issue #525 got me with the Heisenberg fake-out.
posted by klausman at 9:28 PM on June 12, 2020

After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement.

TH || ANKS, FOR YOUR GENIUS, AL, ON THE INSIDE BACK COVER. || IS

MA || NAGEMENT PUTTING THE BRA || KES

ME || HOPES, ON YOUR PLANS AND LETTING YOU WORK ON E || VERY

MA || D MAGAZINE CENTERFOLD INSTEA || D?

YE || S, WE DO BESE || ECH!
posted by New Frontier at 10:29 PM on June 12, 2020 [17 favorites]

That’s not even a lot of code!

(“We don’t buy it by the line.”)
posted by clew at 11:37 PM on June 12, 2020

It’d be really cool if there was a web equivalent of folding, like responsive folding.
posted by geoff. at 12:02 AM on June 13, 2020

To be fair, Jaffee wasn’t the first with the concept; IIRC, the WW2 resistance in the Netherlands (I think) had a pamphlet titled “There Are 5 Pigs”, in which four ordinary drawings of pigs turned into a portrait of Hitler.
posted by acb at 3:21 AM on June 13, 2020 [8 favorites]

Interesting! Google indicates it was Allied propaganda originating in Britain but distributed in various places. I can see versions in Dutch, Arabic and Polish on an initial search.
posted by howfar at 4:38 AM on June 13, 2020 [1 favorite]

More on the WWII fold-ups
posted by TedW at 6:34 AM on June 13, 2020 [2 favorites]

On the subject of Al Jaffee, I highly recommend Al Jaffee's Mad Life: A Biography, with illustrations by Jaffee himself.
posted by ShooBoo at 8:38 AM on June 13, 2020 [1 favorite]

this is sooooo cool!! the only aspect of my career as a front-end web developer that I get excited to geek out about is CSS related stuff. I'm going to be drooling over this for a while.
posted by supermedusa at 9:01 AM on June 13, 2020

This is clearly using F.M. technology.
posted by ob1quixote at 11:05 AM on June 13, 2020

I also love the comments on that post, in which the author debugs problems with his code that people were finding.
posted by adamg at 2:13 PM on June 13, 2020

snappy debugs to stupid problems?
posted by Rev. Syung Myung Me at 5:41 PM on June 13, 2020 [6 favorites]

I’m glad that people like this post, which just reproduces a cool project’s description basically verbatim. If you haven’t yet, maybe go to it and give it a token, meaningless upvote?
posted by Going To Maine at 11:16 AM on June 14, 2020

SQUEE!
posted by mazola at 3:09 PM on June 15, 2020