This 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.
It'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.
I 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.
I 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).
Nice 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.)
I 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).
Doesn'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?
I 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.
Am 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.
As 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.
This 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?
I 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.
It 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.
This 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.
[+] [-] georgemcbay|14 years ago|reply
[+] [-] cookiecaper|14 years ago|reply
[+] [-] mtts|14 years ago|reply
[+] [-] toast76|14 years ago|reply
The real reason is things like this. Just because you CAN doesn't mean you SHOULD.
[+] [-] cesarsalazar12|14 years ago|reply
[+] [-] antidaily|14 years ago|reply
[+] [-] ben1040|14 years ago|reply
[+] [-] nrj|14 years ago|reply
[+] [-] shocks|14 years ago|reply
[+] [-] exDM69|14 years ago|reply
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).
[+] [-] JoshTriplett|14 years ago|reply
[+] [-] NanoWar|14 years ago|reply
[+] [-] ewoutkleinsmann|14 years ago|reply
By the way, if someone knows the real problem and, even better, a solution for it, I'm very interested.
[+] [-] kyberias|14 years ago|reply
[+] [-] ceejayoz|14 years ago|reply
[+] [-] tsunamifury|14 years ago|reply
[+] [-] dendory|14 years ago|reply
[+] [-] moe|14 years ago|reply
[+] [-] anonhacker|14 years ago|reply
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|14 years ago|reply
[+] [-] orcadk|14 years ago|reply
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.
[+] [-] paintAcquaint|14 years ago|reply
[+] [-] nodata|14 years ago|reply
There is no other benefit. It's a step backwards.
[+] [-] Kevindish|14 years ago|reply
[+] [-] FuzzyDunlop|14 years ago|reply
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|14 years ago|reply
[+] [-] goblin89|14 years ago|reply
[+] [-] palguay|14 years ago|reply
[+] [-] nazar|14 years ago|reply
Several years ago I had to buy flash version of this for some 70pounds or so.
[+] [-] pjtaipale|14 years ago|reply
[+] [-] daniel_iversen|14 years ago|reply
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?
[+] [-] johanbrook|14 years ago|reply
http://joecritchley.com/demos/boardflip/