I used to love reading the forums here, but participating in them turned out to be a whole new level of fun!
Thanks everyone for the comments. They're much appreciated.
njchava:
Most important resource for you is the official docs.
YUI allows you to do is gradually change a numeric CSS value from what it is at the moment to whatever you want it to become. So you can go from 'marginLeft' from 0 to 100px in 1.5 seconds, for example.
So first, position everything on the page without any Javascript at all... just use CSS. So in your case, you can do:
#page-one, #page-two {position:absolute; top:0; width:100%; height:1000px;}
#page-one {left:0;}
#page-two {left:100%;}
And you want that to gradually change into:
#page-one {left:-100%;}
#page-two {left:0;}
And then back to original:
#page-one {left:0;}
#page-two {left:100%;}
Or you can use floats, whatever. The point is you can animate those CSS values as you wish.
(of course, you need those elements with IDs: #page-one, #page-two, #button-left, #button-right)
Here's the code you can use:
(See
http://yuilibrary.com/yui/docs/event/ and
http://yuilibrary.com/yui/docs/transition/)
YUI().use('event', 'transition', function (Y) {
// To go right:
function handleClickRight (e) {
Y.one('#page-one').transition({
left: '-100%'
});
Y.one('#page-two').transition({
left: '0'
});
}
// And to go back (left):
function handleClickLeft (e) {
Y.one('#page-one').transition({
left: '-100%'
});
Y.one('#page-two').transition({
left: '0'
});
}
Y.one('#button-right').on("click", handleClickRight);
Y.one('#button-left').on("click", handleClickLeft);
});
