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.
On Oct 31, 9:45 am, davidck <[EMAIL PROTECTED]> wrote:
> 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 <[EMAIL PROTECTED]> wrote:
>
> > 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>
