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.
On Nov 13, 11:40 am, VirtuosiMedia <[EMAIL PROTECTED]> wrote:
> 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>
