8 ms·
Turn.js - The page flip effect for HTML5
turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.
- kyberias 15y agoThis really highlights the font rendering problems (blurriness) of current browsers when using HW accelerated CSS.
- moe 15y agoWow, that's the best impl I've ever seen of this effect. It looks and feels very realistic in chrome.
- cmer 15y agoIt doesn't seem to load on my iPad. Works in Chrome, however.
- earle 15y agoLot of flickering and flashing under Safari
- georgemcbay 15y agoThis is cool and I don't mean to disparage the work that went into it, but at the same time I hope nobody actually uses it because just plain old vertical scrolling web pages are way more practically usable.
- cookiecaper 15y agoIt's a good alternative to Flash. I don't think people really advocate the effect as a replacement for normal scrolling paradigms. There are some specific cases where it might make sense to do it and it's great that those pages will no longer be forced into Flash.
- ricardobeat 15y ago> There are some specific cases where it might make sense to do it Like when your client demands it and you give in? I've used pageflip in the past and grew to abhor it. It's only quality is the cool factor, which we got over 6 years ago. I hate magazines that use it for their "digital" version.
- ekianjo 15y agoThere's also a reason it is used. A typical magazine layout does not translate well on an vertical scrolling page. This is one solution to a conversion problem. There's not always a "BEST" solution to that kind of thing. There are trade-offs no matter what you choose to do. However, providing different ways to view the same information is usually a good practice. I wonder what is the "user" perspective on this. I am not sure everyone hates it - since it feels familiar in terms of structure.
- ricardobeat 15y agoI agree, but the trade-offs depend on your goals, and for each of those there is a best solution. If you want to provide a good reading experience on the web, you have to use appropriate layouts.
- petertwhitesell 15y ago>for each of those there is a best solution. This isn't necessarily true. For instance, if A and B are each measurable characteristics of potential solutions and your goal values A and B equally, if all other characteristics of solutions X and Y are equal, but X={A:2, B:7, ...} and Y={A:7, B:2, ...}, then X and Y are equally "good" solutions according to your goal.
- ricardobeat 15y agoYou're funny.
- 15y ago
- mtts 15y agoI think so to, but usability research done by a partner company of ours showed, to their and our surprise, that "ordinary users" prefer this page turning effect.
- notatoad 15y agowhat sort of usablity research? did you show users a page with and without page turn effects and ask them which they prefer, or did you actually monitor their usage over an extended period and see which pattern encouraged more use? because of course your users say they like the flashy effects, but you should never listen to your users when they say things like that. that's the sort of thinking that leads to sounds when buttons are pressed.
- weego 15y agoI would question this result in almost every meaningful demographic. I've sat and watched people fail to discover non-standard navigation methods countless times in testing of products across 12-18 and 20-60 (students and teachers separately) every time one is provided as part of a supplier product. Unless there was some kind of conscious or subconscious prompting going on I would doubt that anyone would genuinely favor it. You can easily, to the detriment of results, create an environment where people say they like something when really they like the impact the the thing had on them the first time ("oh, cool") when really they don't prefer it at all but the record only reflects their initial impression.
- orcadk 15y agoDemographics are more varied than that though - they also vary by Country. Take Denmark, the birthplace of several of the major players in flip catalogs - online flip based catalogs are so common that every internet going user knows what they are, and how to interact with them. With such a common use of them, we can start looking at how to optimize the catalog format itself, rather than stick with the scrolling vs. catalog format discussion.
- justincormack 15y agoSo did Steve Jobs; he saw a preview of an app I worked on and complained it did not have page flip. Can't stand it myself.
- antidaily 15y agoSolid effect but not a fan of how it breaks the back button.
- ben1040 15y agoYeah, I noticed I can't "back" out of the demo page altogether.
- deleted 15y ago[deleted]
- digitallimit0 15y agoHuh, the back button worked perfectly for me in Chrome, OS X Lion.
- pragone 15y agoDoesn't work in Chrome, OS X Snow Leopard
- nrj 15y agoChrome/Snow Leopard here... I can back through all the pages, but when I get to the cover I'm stuck there.
- brador 15y agoGood stuff, Add some shading for a 3d effect, looks "2D"/flat. Vertical would also be awesome (think notepad [of paper])...
- NanoWar 15y agoThe font on the "page" gets blurry when the corner becomes clickable (at least on my machine, and it uses a ton of resources).
- ewoutkleinsmann 15y agoI think that is a bug in the hardware acceleration of Chrome. I've got the same problem on my website where I use CSS to do a crossfade on the background image. Everytime the images are crossfading all the text on the website gets blurry. By the way, if someone knows the real problem and, even better, a solution for it, I'm very interested.
- dangoor 15y agoI saw the same issue in Firefox (Nightly).
- nazar 15y agoCool man, great implementation! Several years ago I had to buy flash version of this for some 70pounds or so.
- anonhacker 15y agoOverall very nice, there is some weird page folding going on when you act weird but probably just some small quirks. On a side note, please make your own arrow on the corner of that front page of the book. I think almost everybody knows where that's from...
- nazar 15y agoIs it same with facebooks? I am only guessing here, because I don't have facebook account. Whatever the origin is, it looks nice.
- anonhacker 15y agoI really cant tell if this is sarcasm. It's stolen from the amazon logo
- nazar 15y agoOh, that arrow. I misunderstood you.
- daniel_iversen 15y agoWow, this is really good (and the best example of page turning I've seen done in HTML+js) well done! Wonder how stable and smooth it is with large HTML pages, do we know? The back button stuff you could make work with the html5 history API, correct?
- nodata 15y agoI hate things like this. Take the iPad: to turn a page, I have to wave my hand over the screen, obscuring the text in process. For no reason beyond familiarity. There is no other benefit. It's a step backwards.
- Kevindish 15y agoWorks really good on iPad 2!
- toast76 15y agoThe reason why flash is (was) such a horrible horrible thing for the web is only partially because it was a shitty shitty plugin. The real reason is things like this. Just because you CAN doesn't mean you SHOULD.
- cesarsalazar12 15y agoI couldn't agree more. All the CSS3/HTML5 craze really worries me. With all the new tools we have available, it's more important than ever to remember that with great power comes great responsibility (to care about our users).
- FuzzyDunlop 15y agoIt looks snazzy, but the example does a brilliant job of defeating the object. It works with flipping pages to see more content, but then you have overflowing content on one page that requires vertical scrolling* to see it all. I've never come across a book that requires me to do something other than turn the page to read more. *This is also broken (presumably in an attempt to prevent scrollbars appearing), and requires a click and drag to work normally.
- sherwin 15y agoYou can also click the left hand side or right hand side (on mouse over, you'll see a button fade in) to turn the page.
- rorrr 15y agoEmulating old paradigms with the new technology is one of the biggest fails of UI designers in general. Why not got a step further, force your app users to walk to a virtual book store in a 3D world before they can start reading.
- fosk 15y agoWhile I agree with your first sentence, actually forcing my users to walk to a (virtual) book store is an old paradigm.
- Dejital 15y agoI believe the virtual book store example was sarcasm.
- rhizome31 15y agoI've worked on an app that allows people to upload their photos to make actual photobooks. In this case it's nice to be able to show them what the book will look like. That app uses something in flash, but this HTML5 thing looks better.
- mangodrunk 15y agoDoes the animation really add much? Would it just become annoying quickly?
- smiler 15y agoPerformance on IPad 1 is abysmal
- weixiyen 15y agoit's glitchy and flickers. chrome latest on PC
- mekazu 15y agoIt works fine for me. Could be a graphics card issue?
- lbotos 15y agoIs that the Amazon Arrow? It'd be cool (By my standards) if it was similar, but it looks like a straight rip. :(
- palguay 15y agoI have used https://github.com/joseph/monocle/ https://github.com/joseph/monocle/ for my android app https://market.android.com/details?id=in.microangels https://market.android.com/details?id=in.microangels
- ceejayoz 15y agoWhy do people put QR codes on websites (the credits pane)?
- tsunamifury 15y agoSo you could easily test out the demo on your mobile device w/o having to retype the URL.
- ceejayoz 15y agoI'd fine typing 'turnjs.com' easier than finding the QR reader and scanning, personally...
- tsunamifury 15y agoAnd so you've realized the paradox-of-uselessness known as the 'QR code'.
- stdbrouw 15y agoNitpick: don't call an animation lightweight when it's half the size of the entire jQuery library.
- woogley 15y agoThe minified/gzipped jQuery on that page is 32.8k. The gzipped turn.min.js it comes out to 6k. It's like half of this comments page is filled with people TRYING to come up with something overly critical to say. What a negative site this place has become.
- stdbrouw 15y agoJeez man, I explicitly prefaced my comment with "nitpick", as in "minor quibble" as in "not overly important." I can't help not many people get very excited by a page turn animation.
- woogley 15y agoWell, in your case, in addition to not overly important, your point is flat out wrong. My frustration isn't with you in particular, it's just that HN doesn't seem to be able to enjoy a good hack anymore. It's just a circlejerk of people saying <some cool thing> isn't suitable for widespread use.
- shocks 15y agoNice effect, but the fact the page becomes blurry when I have my mouse over the "next page" button is annoying. I have to move the mouse away while reading and back when I want to turn the page. I'd prefer to just not move the mouse and roll a scroll wheel. (Actually, that's a lie - I'd rather not touch the mouse at all and just press j.)
- JoshTriplett 15y agoDoesn't happen here; the page doesn't change when I move the mouse over the "next page" corner, other than the folding up of that corner. Everything remains crisp. What browser did you use?
- pacmon 15y agoThe blurring happens in Firefox 10. It also makes the whole 'page' shift a couple pixels. It's really disruptive and ruins the whole effect.
- JoshTriplett 15y agoInteresting. I run Firefox 10, and it doesn't happen here.
- exDM69 15y agoI see that blurring too. I'm using Chromium 14.xx on Linux (yeah, it's old). Makes it impossible to hover the mouse cursor over the "next page" button. I've seen many other CSS effects suffer from the same issue. This apparently happens when the element is rendered to a texture first and then applied to the screen using a filtered texture sampling (in the GPU).
- miles_matthias 15y agoI hope the Kindle Cloud Reader uses this. One of the things I like about iBooks is the turn animation that makes it feel so familiar.
- goblin89 15y agoNeat! It reminds of Google's book http://www.20thingsilearned.com/ http://www.20thingsilearned.com/ without hard covers and with only corner active. (I once had an idea of making a reusable lib based on their book's code at http://code.google.com/p/20thingsilearned/ http://code.google.com/p/20thingsilearned/, but never finished.)
- johanbrook 15y agoAlso check out Boardflip. A Flipboard style interaction implemented in JS (experimental). http://joecritchley.com/demos/boardflip/ http://joecritchley.com/demos/boardflip/
- dendory 15y agoAm I the only one who finds this highly annoying? It seems almost every news site is now starting to serve some advanced layout, especially when they detect an iPad, involving this kind of horizontal scrolling. Invariably it's longer to load, breaks half the time, and breaks the back button.
- paintAcquaint 15y agoThis thing crawls to the next page on my iphone 4. Is this really a good alternative to flash if the only machines fast enough to handle this animation smoothly already have the horse-power to handle flash?
- orcadk 15y agoAs there are lots of comments lamenting the fact that anyone might actually use this, let me give my perspective. I currently work for, and have been since the start of this whole online 3D-pageflip catalog business started back in ~2006. To start out - I hate the pageflip effect. In the beginning, clients would drop the jaw to the floor when they saw the effect. They'd go into a coma when they saw you could drag the corners. We didn't have to do any sales beyond that - the effect alone sold it and the catalogs spread like wildfire. Sorry. As time progressed, the pageflip effect alone didn't really cut it, especially as competition appeared. Since then we, as others, have gone in different directions, usually in the form of offering different addon modules, integration, etc. As time went on, the effect got diluted as well - we no longer offer the user the ability to actually drag the corners - usability testing proved that to be bad and cumbersome to use, instead you only get the option to flip the page by click big "Next/Previous" bars next to the catalogs. The effect is only seen while the pages flip automatically after an arrow click. So why use the format at all? As many others say, normal scrolling is much more web friendly. However, there are billions of catalogs out there today, and millions more produced each and every day. Companies have hundreds of thousands of product manuals lying around, and they'd like to show them in a lightweight format that doesn't require you to download the 200mb PDF. There are many retail chains that still send physical catalogs to your physical mail boxes each and every day. These catalogs are usually produced by print agencies on a weekly basis, and to also produce the same content in a webfriendly manner, that'd require tonnes of extra work. Instead, they can utilize what they're already producing and just put it online in an interesting format to read, for the common user. To sum up - the flip effect was overused, but has now found a decent niche where it can be used. Lots of material warrant the format, even though it's not the optimal one. I think turn.js looks very interesting. I have a boatload of catalogs running on Flash today, and I'd love to change that.
- pjtaipale 15y agoThis is so cool. It allows me to identify stupid web sites immediately, and never return to them. I could probably even create a browser plugin that warns me before I enter such sites that want to apply a broken paper paradigm to the web.
- gumba 15y agoNha! no torn effect :-(