

Turn.js - The page flip effect for HTML5 - blasten
http://www.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.
======
georgemcbay
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.

~~~
mtts
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.

~~~
weego
I 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
Demographics 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.

------
toast76
The 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
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).

------
antidaily
Solid effect but not a fan of how it breaks the back button.

~~~
ben1040
Yeah, I noticed I can't "back" out of the demo page altogether.

~~~
digitallimit0
Huh, the back button worked perfectly for me in Chrome, OS X Lion.

~~~
pragone
Doesn't work in Chrome, OS X Snow Leopard

------
shocks
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.)

~~~
JoshTriplett
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?

~~~
pacmon
The 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
Interesting. I run Firefox 10, and it doesn't happen here.

------
NanoWar
The font on the "page" gets blurry when the corner becomes clickable (at least
on my machine, and it uses a ton of resources).

~~~
ewoutkleinsmann
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.

~~~
dangoor
I saw the same issue in Firefox (Nightly).

------
kyberias
This really highlights the font rendering problems (blurriness) of current
browsers when using HW accelerated CSS.

------
ceejayoz
Why do people put QR codes on websites (the credits pane)?

~~~
tsunamifury
So you could easily test out the demo on your mobile device w/o having to
retype the URL.

~~~
ceejayoz
I'd fine typing 'turnjs.com' easier than finding the QR reader and scanning,
personally...

~~~
tsunamifury
And so you've realized the paradox-of-uselessness known as the 'QR code'.

------
dendory
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.

------
moe
Wow, that's the best impl I've ever seen of this effect. It looks and feels
very realistic in chrome.

------
anonhacker
Overall 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
Is it same with facebooks? I am only guessing here, because I don't have
facebook account. Whatever the origin is, it looks nice.

~~~
anonhacker
I really cant tell if this is sarcasm. It's stolen from the amazon logo

~~~
nazar
Oh, that arrow. I misunderstood you.

------
orcadk
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.

------
paintAcquaint
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?

------
nodata
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.

There is no other benefit. It's a step backwards.

~~~
Kevindish
You can just tap the right corner ;)

~~~
rhizome
Funny thing about the right corner: if you hover over it and circle down the
inside of the page, you'll see the left-inside corner pop up.

------
FuzzyDunlop
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.

~~~
sherwin
You 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.

------
goblin89
Neat! It reminds of Google's book <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/>, but never finished.)

------
palguay
I have used <https://github.com/joseph/monocle/> for my android app
<https://market.android.com/details?id=in.microangels>

------
nazar
Cool man, great implementation!

Several years ago I had to buy flash version of this for some 70pounds or so.

------
pjtaipale
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.

------
daniel_iversen
Wow, 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?

------
johanbrook
Also check out Boardflip. A Flipboard style interaction implemented in JS
(experimental).

<http://joecritchley.com/demos/boardflip/>

------
miles_matthias
I 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.

------
earle
Lot of flickering and flashing under Safari

------
lbotos
Is that the Amazon Arrow? It'd be cool (By my standards) if it was similar,
but it looks like a straight rip. :(

------
brador
Good stuff, Add some shading for a 3d effect, looks "2D"/flat.

Vertical would also be awesome (think notepad [of paper])...

------
stdbrouw
Nitpick: don't call an animation lightweight when it's half the size of the
entire jQuery library.

~~~
woogley
The 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
Jeez 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.

------
smiler
Performance on IPad 1 is abysmal

~~~
doomlaser
Performance on iPad 1 is abysmal for most everything.

~~~
leviathan
iPad 1 was useful most of the time, when you knew of the weak performance. But
iPad1 with iOS 5 is a useless piece of metal and glass. It literally takes 2
second to unlock.

------
Kevindish
Works really good on iPad 2!

------
cmer
It doesn't seem to load on my iPad. Works in Chrome, however.

------
gumba
Nha! no torn effect :-(

------
weixiyen
it's glitchy and flickers. chrome latest on PC

~~~
mekazu
It works fine for me. Could be a graphics card issue?

------
rorrr
Emulating 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.

~~~
rhizome31
I'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
Does the animation really add much? Would it just become annoying quickly?

