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.
On Nov 13, 12:58 am, Tekcronic <[EMAIL PROTECTED]> wrote:
> 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>
