TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

The Al Jaffee / Mad Magazine Fold-In Effect in CSS

482 pointsby thomasparkalmost 5 years ago

17 comments

fluxsaucealmost 5 years ago
This is fun, thanks for making that! There&#x27;s a treasure trove of Al Jaffee&#x27;s work that can be shared with future generations.<p>Al Jaffee just retired at 99! Here&#x27;s article on his retirement, which is also linked to from the original site: <a href="https:&#x2F;&#x2F;www.washingtonpost.com&#x2F;arts-entertainment&#x2F;2020&#x2F;06&#x2F;06&#x2F;al-jaffee-mad-magazine-retires&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.washingtonpost.com&#x2F;arts-entertainment&#x2F;2020&#x2F;06&#x2F;06...</a>
acomjeanalmost 5 years ago
how the fold in came to be an every issue feature is kinda a fun story:<p>From his 95th birthday article (gothamist). It has a nice video too:<p><a href="https:&#x2F;&#x2F;gothamist.com&#x2F;arts-entertainment&#x2F;hanging-with-al-jaffee-mad-magazines-95-year-old-journeyman-cartoonist" rel="nofollow">https:&#x2F;&#x2F;gothamist.com&#x2F;arts-entertainment&#x2F;hanging-with-al-jaf...</a><p>&quot;One morning I woke up and I spread out all the magazines I was subscribing to which included Playboy, and National Geographic and a couple of others. When I opened them up, the things that popped out was the first one, Playboy, was the fold-out; and then National Geographic had something that showed the new stadium being built by some athletic team. Then there was another one with a fold-out. Of course, the way we work is something triggers a thought, and what triggered in me was if all of them are doing expensive, full color fold-outs, why doesn&#x27;t MAD Magazine do a cheap fold-in? MAD was black and white at that time.<p>I thought about it for a moment, and then I looked in the newspaper and there was a story about Elizabeth Taylor and Richard Burton and Eddie Fischer and accusations that Elizabeth Taylor was going from one guy to another. I thought, &quot;Well, that might make a fold-in. I did something very simple, which was to put Elizabeth Taylor on the left side, and Richard Burton was somewhere in the middle, but on the right side, there was just some young guy. The question was something like, &quot;Who&#x27;s going to be Elizabeth Taylor&#x27;s next?&quot; We thought it would be Richard Burton, but if you folded it in, it was just that guy on the right side, and it says, &quot;some guy in the crowd.&quot; That was the gag. I took it into the editor, Al Feldstein. I said, &quot;Al, I&#x27;ve got an idea that strikes me funny, but you&#x27;re going to reject it because if you printed it, it would mutilate a page in the magazine.&quot; He looks at it. He says, &quot;I like this.&quot; He immediately jumped up and ran into Bill Gaines, and then came back to me and said, &quot;Bill said, &#x27;Lets do it. If the kid folds the page, and he feels he&#x27;s ruined the magazine, he&#x27;ll buy another magazine for his collection.&#x27;&quot; Ever the money man.<p>I did it, and that was it. It was a one shot gag. A couple of weeks later, Feldstein rushes up to me—I happened to be up at MAD at that time—and said, &quot;Where&#x27;s the next fold-in?&quot; I said, &quot;Al, there is no next fold-in. That&#x27;s it. It was a one time gag.&quot; He says, &quot;I want another fold-in.&quot; &quot;
staycoolboyalmost 5 years ago
This is such a great example of how CSS is often overlooked. Very impressive. I learned a lot from reading it.<p>I bet if you had asked how to do this on StackOverflow without any prompting about language, you would have seen a LOT of javascript Me included.<p>EDIT: I literally just went to a project I&#x27;m working on and removed a piece of JS code that animated a feature because of what I learned from this example.
评论 #23459803 未加载
评论 #23460008 未加载
jedbergalmost 5 years ago
Cool effect but totally broken on Safari. :(<p>The halves don&#x27;t line up, and then when it&#x27;s done the right half flashes back to a random portion of the image, and then when you move away to &quot;unfold&quot; it&#x27;s missing a chunk in the middle.
评论 #23458972 未加载
评论 #23459976 未加载
nsxwolfalmost 5 years ago
Broken for me on Chrome, after the animation a portion of the lower right quadrant re-appears, flipped.
bjarnehalmost 5 years ago
Every time I see something like this I&#x27;m reminded of how little CSS I actually master.
评论 #23460226 未加载
Yhippaalmost 5 years ago
These were great growing up. The March Madness one made me laugh. It&#x27;s good to know that these things still give that effect. Will almost certainly be lost to future generations.
dangalmost 5 years ago
See also <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23442041" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23442041</a> about Jaffee.
golem14almost 5 years ago
Awesome (on MacOS Chrome)! Really neat what you can do with CSS. And thanks for the shoutout for Al Jaffee!<p>BTW: Does anyone know if there&#x27;s an archive of the german mad magazine ? The translation is an experience in itself, and while I found a commercial CD with all the mad archives in English, nothing for German.
Osirisalmost 5 years ago
Can someone explain exactly how this is work is working? I realize it&#x27;s using CSS transforms but I can&#x27;t visualize it in my head from reading the code.
评论 #23459666 未加载
latchkeyalmost 5 years ago
I built the renderer and thus page turner mechanism for Wrap [1], which kind of reminded me of this. It was interesting to build it and I learned a lot about performance optimizing CSS. Apologies if it sucks now as I haven&#x27;t been involved on the project in many years.<p>[1] <a href="https:&#x2F;&#x2F;www.wrap.co&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.wrap.co&#x2F;</a>
gkobergeralmost 5 years ago
EDIT: I misunderstood how this works!<p>Really cool! Might be good to make the &quot;closed&quot; the default and the mouseover open it?
评论 #23458947 未加载
评论 #23459011 未加载
neovivealmost 5 years ago
These are wonderful! I resubscribed to MAD Magazine a few years ago when my oldest son was able to understand the humor. The fold-ins were his favorite part. What an amazing run for Al Jaffee and MAD magazine--truly a part of history.
TheRealDunkirkalmost 5 years ago
Aaaand the two halves don&#x27;t line up in Safari, ruining the effect.<p>Figures.
评论 #23458224 未加载
评论 #23458215 未加载
评论 #23458765 未加载
matthewfelgatealmost 5 years ago
Oh, is this what they did in that episode of Malcolm in the middle...
hachibualmost 5 years ago
As a kid, this was my favorite part of Mad Magazine.
评论 #23459528 未加载
chrisweeklyalmost 5 years ago
Cool idea, but (1) :hover excludes mobile users, maybe pick a more accessible event trigger? and (2) alignment issues
评论 #23458252 未加载