Amazing CSS3 3D popup book

imjared 13 years ago |

I worked with the guys who built this (we're a DC design studio) and can tell you that it doesn't gracefully degrade simply because it's not supposed to. As some people grasped, this was for a frontend conference where everyone would be expected to be running the latest and greatest browser. There's no guarantee it will work on your setup but when it does, it's a cool experience.

Followup on how it was built here: http://coding.smashingmagazine.com/2012/04/17/beercamp-an-ex...

Full repo here: https://github.com/nclud/2012.beercamp.com

jack-r-abbit 13 years ago |

While the overall graphics and the general mechanism looks decent, the actual action of turning a page if very kludgy and glitchy. I found it difficult to get the pages completely turned since the book kept rotating a bit.

jdonaldson 13 years ago | |

Another tiny nit: They don't need those "+" icon interactions. They could've just used the book rotation controls as-is. Popup books usually don't have buttons, at least not from my generation /getoffmylawn.

city41 13 years ago | |

What browser/OS are you using? For me in Chrome/OSX, the pages turn flawlessly.

jack-r-abbit 13 years ago | | |

Chromium-based RockMelt 0.16.91.something (on Win7)

dave_sullivan 13 years ago |

So I'll get down voted for this but it needs to be said: this is very cool and is a great proof of concept for the direction things are going. However, if you're promoting a commercial product, event, etc., you could have just used flash--it would be trivialish to implement, perform better, and have no cross browser issues--although no iOS to be fair...

As it stands, how many people will hit the site, see it's not working because they have the wrong browser version, and leave?

ceejayoz 13 years ago | |

> and have no cross browser issues--although no iOS to be fair...

I love this casual dismissal of tablet/mobile phone users as if it were a non-issue.

dave_sullivan 13 years ago | | |

Hardly a non-issue, but again, judging by comments below, hardly an issue that's been solved here.

So flash or JS, certain mobile users that should be able to see it won't be able to see it.

ceejayoz 13 years ago | | |

> So flash or JS, certain mobile users that should be able to see it won't be able to see it.

JS can be fixed for those users, though. Flash can't.

Livven 13 years ago | | |

Umm... as if that animation even worked on iOS or Android browsers...

da_n 13 years ago | | |

I can also confirm works on iOS (using iPad), has a couple of spacing glitches, however page turning animation is extremely smooth, an the actual pop-ups are exact same as on desktop, no problem and performs like a champ.

Gormo 13 years ago | | |

Worked fine for me on iPad Safari.

mikebridgman 13 years ago | |

One thing to consider is that their target audience is attendees of the Front-trends conference, a conference specifically for front end developers. I think it's a safe bet that a majority of the traffic will have a compatible browser.

dave_sullivan 13 years ago | | |

Ha, excellent point. Judging by some of the comments here, much of their traffic may not have a compatible browser version after all, but I'd imagine that they still have a higher tolerance for that sort of thing in the name of advancing the field.

eridius 13 years ago | |

This is a terrible attitude. Among the other things that have been pointed out, not all desktop browsers have Flash. For example, no computer I own has Flash installed on the system. If I need Flash for some reason, I keep Chrome around, but it has to be a damn good reason to bother with.

lotyrin 13 years ago | |

Yes. Because graceful degradation isn't a thing.

Obviously they didn't apply it here fully, but it would have been possible for them to reuse their text divs on text-only browsers, drop their svgs for some prerendered raster graphics on SVG-less browsers, use their SVGs but have them render flat on 3d-transform-less browsers, have static 3d copies of each page if JS isn't available but 3d was, etc., etc.

It's even possible for established sites to collect statistics on combinations of available browser features, estimate ROI vs. development effort and decide which combinations beyond the least-common-denominator are worth coding for and slowly roll them out one at a time.

pizzatime 13 years ago | |

That's not the point of the site. It's an annual meetup where people push the limits of the latest and greatest web technologies. The people visiting it will be web designers/developers, not Jane Doe who only visits facebook.

patrickaljord 13 years ago | |

They could have done it in Flash but then they would not have been featured on HN's frontpage.

dazzawazza 13 years ago |

There seems to be quite a lot of Javascript in there as well :) Really nice design.

BTW: works fine in Safari 6.0 OSX

sray 13 years ago |

This is, to use a word I never use, delightful! Great concept, whimsical design, and wonderful execution. Well done!

Now, if I could only stop flipping the pages and get back to work...

Narretz 13 years ago |

works "meh" in firefox 14.01. You can browser, but it stutters and you don't see the nice pop-up effect. It just appears when the page is turned far enough.

RandallBrown 13 years ago |

Seems like they should have some sort of fallback to users of IE can at least get some information about the conference

Very neat effect though. Is this based on actual folding math or is it just a series of neat animations? Like could this be built into a sort of popup book framework?

ralfn 13 years ago | |

You only need a fallback for IE if your audience uses IE

mparlane 13 years ago |

"Boo! It looks like your browser doesn't support 3D transforms."

Latest Chrome on Centos6 using a ssh socks proxy.

edit: solved thanks to http://news.ycombinator.com/item?id=4393135

rnernento 13 years ago |

Really cool design, I love seeing seamless in browser 3D, can't wait till this is the norm.

sahat 13 years ago |

Works smoothly on Safari 6.0 (8536.25) in Mountain Lion 10.8.

thomasfl 13 years ago |

Hey you polish frontend hackers! Nice work!

atirip 13 years ago |

Immediately crashes iPad Safari :-(

Samuel_Michon 13 years ago | |

Works fine on my iPad 2, iOS 5.1.1.

hnriot 13 years ago | |

Not for me, ipad3 here and it worked fine

huntaub 13 years ago | | |

It worked for me on iOS 6. I can't speak for earlier versions.

city41 13 years ago | | |

It even works fine on my iPad 1

fpp 13 years ago |

not working in Chrome Version 21.0.1180.77 on Linux

ThePinion 13 years ago | |

I'm on chromium 22 on linux. Maybe you need to go to the about:flags page and enable "override software rendering list" for your browser to use the proper acceleration on the page. That's what I had to do for my old Inspiron 1545.

jawr 13 years ago |

doesn't work under Chrome Version 20.0.1132.57 :(

tseabrooks 13 years ago | |

I find it interesting that this works, or doesn't. Based on these "Micro-Version" differences as well as whole version differences. What are the key differences? Is it actually chrome or some other system level difference?

Chrome Version 21.0.1180.79 works for me.

paulirish 13 years ago | | |

3D transforms is nearly completely dependent on the GPU of your machine. about:gpu in Chrome will give you more information about the differences and capabilities of your machine. In some cases, old drivers are too unstable to support and so they're blacklisted by Chrome.

nilliams 13 years ago | | |

Gah this helped me a lot, thanks. about:gpu told me my WebGL was disabled in about:flags... which it was. Not sure how that happened as that's been annoying me forever.

hazelnut 13 years ago | | |

hm, so you have to check the GPU via JS to check if the user can handle 3D transforms?

about:gpu is nice. thanks.

lotyrin 13 years ago | | |

The browser does to decide if it's safe to use them. JS should be able to just use feature detection.

tayl0r 13 years ago | |

Why would you be running Chrome version 20? Just restart your browser.

da_n 13 years ago | | |

Had exact same question, why would someone purposely disable/prevent the auto-update mechanism?

mparlane 13 years ago | |

Follow these instructions:

http://news.ycombinator.com/item?id=4393135

FlukeATX 13 years ago | |

Version 21.0.1180.79, doesn't work for me either.

rnernento 13 years ago | |

Working great in : Chrome 21.0.1180.79 m

Turing_Machine 13 years ago | |

Okay in 21.0.1180.75 (OS X).

hamxiaoz 13 years ago | |

hmmm, mine works fine: Chrome Version 20.0.1132.57m win7

valuegram 13 years ago | |

works in Chrome 21.0.1180.79 beta-m