Page Turner Animation

[Tekcronic]

here is what I have it works in Fire Fox and chrome not in IE7.

<code>
window.addEvent('domready', function() {
/* things in here happen as soon the document is ready */

// set constants
var $pageheight = 189; // the single page height we're using
var $pagewidth = 146; // the single page width we're using
var $pageYpos = 0; // the current Y position of our background-image
(in both pages)
var $turnheight = 0; // The height of the page turning image.
var $turnwidth = 0; // The width of the page turning image.
var $bgposition = 0;

var leftpage = $('leftpage');
var rightpage = $('rightpage');
var flip = $('flip');
var lfx = leftpage.effects({duration: 10, transition:
Fx.Transitions.Quart.easeOut});
var rfx = rightpage.effects({duration: 10, transition:
Fx.Transitions.Quart.easeOut});
var flipfx = flip.effects({duration: 50, transition:
Fx.Transitions.Quart.easeOut});

//Start Leftpage
$('leftpage').addEvent('mousedown', function() {
$pageYpos = $pageYpos + $pageheight;
$bgposition = '0px '+$pageYpos+'px';
lfx.start({'background-position': $bgposition});
flipfx.start({'background-position': '0 0'});
});

$('leftpage').addEvent('click', function() {
$bgposition = '146px '+$pageYpos+'px';
flipfx.start({'background-position': '236px 0px'});
rfx.start({'background-position': $bgposition});
});
//End Leftpage
//Start Rightpage
$('rightpage').addEvent('mousedown', function() {
$pageYpos = $pageYpos + $pageheight;
$bgposition = '146px '+$pageYpos+'px';
rfx.start({'background-position': $bgposition});
flipfx.start({'background-position': '118px 0px'});
});

$('rightpage').addEvent('click', function() {
$bgposition = '0px '+$pageYpos+'px';
flipfx.start({'background-position': '236px 0px'});
lfx.start({'background-position': $bgposition});
});
//End Rightpage

});
</code>

[keif]

PasteBins are excellent resources for dropping your code in, and I can
guess at the HTML, but do you have a demo page? HTML can you throw in?
Thanks!

-keif

[Tekcronic]

Yea I have put it up at http://www.webwizardwill.com/pgturner/


I did get it to work in IE but I am reworking the code again for a
better animation. I will put up a FF3/IE7 working example on the
index page and from the code orignally posted, I will make a link on
only the index.

-tekcronic

[keif]

I know it's just images, but I gotta say that's kind of cool.

On Oct 29, 1:56 pm, Tekcronic <tekcro...@gmail.com> wrote:
> Yea I have put it up athttp://www.webwizardwill.com/pgturner/

>
> I did get it to work in IE but I am reworking the code again for a
> better animation.  I will put up a FF3/IE7 working example on the
> index page and from the code orignally posted, I will make a link on
> only the index.
>
> -tekcronic
>

[eeerne]

i just tested it in ie6. besides the png transparency it seems to work
pretty well. would be great to have that with mootools 1.2

eni

On Oct 29, 1:56 pm, Tekcronic <tekcro...@gmail.com> wrote:

> Yea I have put it up athttp://www.webwizardwill.com/pgturner/

[Tekcronic]

Going to make 1.2 version after 1.11 version is completed. Until
Joomla updates the library to 1.2 I will build in 1.11 first.

[davidck]

Tekcronic. This is actually a quite interesting approach and does
give an illusion of page flipping.
Good job

On Oct 28, 3:30 pm, Tekcronic <tekcro...@gmail.com> wrote:

[Tekcronic]

I am changing the way the page moves in fact I am not "Moving the
page" anymore rather morphing using an img tag at 100% size of
containing div. It maintains correct angles an example will be post
for the new mootools page turner animation soon at the same location
that the original was posted.

[VirtuosiMedia]

Just as an idea, what if you added some sort of drag event in addition
to the click so that it feels like you're actually dragging the page
to turn? It looks great, good job with the animation.

[Tekcronic]

I was thinking about that and need to figure out how to rotate and
invert an image using JavaScript, heck I guess first I need to figure
out how to do it with just css, then adapt that to JavaScript/
mootools.

[Tekcronic]

I have been moving things around so the project got moved around a bit. Will
repost its new location once it is back up.
--
View this message in context: http://n2.nabble.com/Page-Turner-Animation-tp1390148p3321800.html
Sent from the MooTools Users mailing list archive at Nabble.com.

[Chris Drackett]

Any chance a demo of this is up somewhere? I'd really like to check it
out :)

[Thierry bela nanga]

a jquery demo,

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

--
fax : (+33) 08 26 51 94 51

[Web Wizard Will]

I am sorry to all those who tried to view the demo and was
unsuccessful, I have undergone some major changes with my services
never the less I am still trying to get off the ground. Time is
valueable and I have none. Though I made this project for a client
and she has gone out of business and I would like to see her company
come back. So I am hoping to build this project back up and get it
distributed with links back to my site. You might ask why my site and
not hers, well hers is no longer available, which is to bad. Anyhow
more details will follow on what I am doing with this project and why.

I am asking for any and all help that people may offer. I do have a
Google project up and going with an older copy, which is not what I
intended on distributing but I have yet to find the finalized version
I created. Anyhow the old links work and redirect to the demo page on
my domain at http://www.webwizardwill.com/pgturner/ redirects to
http://www.webwizardwill.com/scrapbook/

please join the Google project which is located at:
http://code.google.com/p/scrapbook

[Web Wizard Will]

created new thread that is closer to what is being done see:
http://groups.google.com/group/mootools-users/browse_thread/thread/64888252cb08a627

On Aug 13, 4:46 pm, Web Wizard Will <wwwresel...@gmail.com> wrote:
> I am sorry to all those who tried to view the demo and was
> unsuccessful,  I have undergone some major changes with my services
> never the less I am still trying to get off the ground.  Time is
> valueable and I have none.  Though I made this project for a client
> and she has gone out of business and I would like to see her company
> come back.  So I am hoping to build this project back up and get it
> distributed with links back to my site.  You might ask why my site and
> not hers, well hers is no longer available, which is to bad. Anyhow
> more details will follow on what I am doing with this project and why.
>
> I am asking for any and all help that people may offer.  I do have a
> Google project up and going with an older copy, which is not what I
> intended on distributing but I have yet to find the finalized version
> I created.  Anyhow the old links work and redirect to the demo page on

> my domain athttp://www.webwizardwill.com/pgturner/redirects tohttp://www.webwizardwill.com/scrapbook/