Comments on: JavaScript Sprite Animation Using jQuery

By: Anonymous

Anonymous — Thu, 29 May 2008 00:14:31 +0000

how do you add a note book images insted of your pages.Then can you add a item to were you can type on the page? if you can E-mail me At sdydy1@aol.com

By: AlexW

AlexW — Tue, 13 May 2008 07:25:48 +0000

In fact, here is the working PNG if anyone is interested.

http://www.sitepoint.com/examples/jquery/pageturn-working.png

By: AlexW

AlexW — Tue, 13 May 2008 07:16:34 +0000

Devon, if you use Fireworks, I’d be happy to give you a copy of the working graphics I used. If you don’t have Fireworks, that file isn’t much more use to you than the file used in the example.

By: Devon

Devon — Fri, 09 May 2008 11:17:10 +0000

How did you generate the image for the curves and curls? I need to make one without the orange and blue stripes. Thanks!

By: Anonymous

Anonymous — Fri, 18 Apr 2008 13:37:40 +0000

the finished demo JS is wrong. Right flip.
Notice that when you right flip, the page displays right-side-left
Right Turner code should be:
/* right page turner */ $("#rightpage").click( function() { $pageYpos = $pageYpos - $pageheight; // note: minus page height $("#rightpage") .css("background-position", "0px "+$pageYpos+"px"); $("#flip").css("background-position", "top left"); setTimeout ('$("#flip").css("background-position", "top center");', 200); setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);

By: nutkong

nutkong — Sun, 06 Apr 2008 08:26:21 +0000

Gorgeous

By: AlexW

AlexW — Wed, 19 Mar 2008 04:52:24 +0000

First off awesome script!!!

One question is there a way I could place a button on the page that would skip to a particular page in the book like say page 3 & 4 with out turning the page?

Thanks chachiisme,

I would take a little bit more coding, but it wouldn’t be hard. Off the top of my head, you would need to add a new function.That function would be similar to the #leftpage/#rightpage functions used in the example above, except it would hardcode the position of the background image to the exact position of the page you wanted, rather than just keeping track of it’s current Y position ($pageYpos = $pageYpos + $pageheight;) as it does now.

You’d them have to tie that new function to a button or link to set trigger it.

By: chachiisme

chachiisme — Wed, 19 Mar 2008 01:33:34 +0000

First off awesome script!!!

One question is there a way I could place a button on the page that would skip to a particular page in the book like say page 3 & 4 with out turning the page?

By: sm

sm — Wed, 19 Mar 2008 01:27:26 +0000

First off awesome script!!!

One question is there a way I jump to a particular page. Like by putting a button that would skip it say page 2 & 3?

By: AlexW

AlexW — Tue, 18 Mar 2008 00:57:52 +0000

Rags, the post above is a complete explanation on how to achieve the effect, so just follow it through.

As far as loading new pages as they are called, you would need to use AJAX to preload pages just before they are needed. This is quite doable, but it’s outside the scope of what I was trying to achieve with the effect.

But if you manage to get it running, we’d be keen to see it in action.