Turn.js - The page flip effect for HTML5
turnjs.com
turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.
turnjs.com
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.
I wonder what is the "user" perspective on this. I am not sure everyone hates it - since it feels familiar in terms of structure.
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.
Someone in this thread gave a great example: their company makes "photobooks" and this effect is used in the preview before you order to make it feel more "real". I think that's a legitimate use.
Obviously, magazines that just plaster pieces of the PDF on and then demand the page flip are not usable or accessible, but there are other uses for something like this.
My comment was related to the (common) case where someone thinks this is the best way to adapt printed content to the web, and that people actually want virtual magazines instead of something suited to screen reading/interaction. Fortunately that appears to be a dying mindset.
I find the same with virtually all animations on phones and other UIs. If it can show me what I want a smidgen quicker by not animating then it gets disabled.
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.
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.
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.
Case in point: touchscreens replacing dials and switches in cars -- cool right? So flexible! But no, in reality they suck and you can't use them at all without becoming a danger to yourself and everyone else on the road. Physical dials and switches are way better because they can be controlled without actually looking at them. But this is something that takes a while to become obvious to people (in fact, car makers are still fucking this up).
The real reason is things like this. Just because you CAN doesn't mean you SHOULD.
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).
By the way, if someone knows the real problem and, even better, a solution for it, I'm very interested.
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...
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.
There is no other benefit. It's a step backwards.
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.
Several years ago I had to buy flash version of this for some 70pounds or so.
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?
Vertical would also be awesome (think notepad [of paper])...
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.
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.