HTML and CSS Reference
In-Depth Information
function positionPage ( end ) {
page . style . webkitTransform = 'translate3d(' + currentPos + 'px, 0, 0)' ;
if ( end ) {
page . style . WebkitTransition = 'all .4s ease-out' ;
// = 'all .4s cubic-bezier(0,.58,.58,1)'
} else {
page . style . WebkitTransition = 'all .2s ease-out' ;
For this example, ease-out did the trick, but for your own projects, play around with
cubic-bezier to give the best native feel to your transitions.
Finally, to make the navigation happen, we must call the previously defined slide
To() methods used in the last example.
track . ontouchend =
function ( event ) {
pageMove ( event );
if ( slideDirection == 'left' ) {
slideTo ( 'products-page' );
} else if ( slideDirection == 'right' ) {
slideTo ( 'home-page' );
Next, take a look at the rotate animation being used in this demo. At any time, you can
rotate the page you're currently viewing 180 degrees to reveal the reverse side by tapping
on the Contact menu option. Again, this only takes a few lines of CSS and some Java‐
Script to assign a transition class onclick .
The rotate transition isn't rendered correctly on most versions of An‐
droid, because it lacks 3D CSS transform capabilities. Unfortunately,
instead of ignoring the flip, Android makes the page “cartwheel” away
by rotating instead of flipping. I recommend using this transition spar‐
ingly until support improves.
Here's the full source , but here's the markup (basic concept of front and back):
<div id= "front"
class= "normal" >
<div id= "back" class= "flipped" >
<div id= "contact-page" class= "page" >
<h1> Contact Page </h1>
Search WWH ::

Custom Search