the iOS split page effect in HTML with CSS3 -webkit-animations…
The demo should be viewed in webkit browsers… Safari on Mac OS X does the best job. The iPhone has a late start but the animations look sweet. Chrome is a little slow on 3d transformation and transitions.
iOS 5 webapp
I am currently working on a webapp framework that mimics iOS 5. So I needed to create the effect of the folders on the iPhone’s Springboard.
Splitting a page was not the problem. I am using two divs with the same background image and the positions are set via jQuery.
But how do we get the arrows to fade in and out correctly and get a smooth effect on the iPhone?
Ok.. next thought… CSS.
I am a big fan of CSS, realizing every day, that even though I’m not a greenhorn, there is still stuff I haven’t done.
So the main idea for the arrow was, to take a rotated square with a mask at 70%. This square div has another div inside it, which is rotated in the other direction, so it’s in the original page position again.
Now we need to set the background position (we will use jQuery to do this). Using the pseudo-classes :before and :after we can add a box shadow if required.
This is basically the same for the upper and lower arrow.
The animations are pure CSS, using -webkit-animation -webkit-transform: translate3d and -webkit-transition.
This is my first approach with dynamic arrows, so it still needs some tweaking, but if you care, you can try the demo or download and play with the sourcecode.
This is without any license, so use it for whatever you like.
Incoming search terms:
ios folder effect jquery, css back button, ios folder jquery, iphone back button, jquery split page,