Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0 it gives a horrible look n feel.
Here’s the link to the demo. Check in an iOS device (open up in mobile safari),
and if you are looking for a desktop version of the Coverflow, you can check my previous post.
I am still completing the descriptive write up and compiling some images so that the demo is explained properly. However, I have added comments to the code in the current demo so that you will get at least some idea of what I am trying to do. All in all there are three files,
and there is also an images folder which has the images of the superheroes. I also have a download link at the bottom of the post.
Some features are,
1) Touch enabled. Use your finger to control. It is a single touch app.
2) Smooth movements because of CSS3 Transitions and Transformations.
3) CSS3 Reflections.
Some of the failures are,
1) I have only supported portrait mode. This doesn’t mean that the coverflow stops working in landscape mode. Its just that the images does not position them accordingly as per the device screen. So 320 x 416 is what I have considered as my boundary for now. If you are checking this in an iPad, the images will still be smaller. You have to work on it a little to make it of iPad size.
2) There are still 7 images as the desktop version (I have not really got much time to make it more dynamic). You can always build on top of this.
3) There are hardcoded co-ordinate values. Again, I haven’t really sat down and tried to clean this up into a more robust and dynamic app. I will try it definitely.
Download the source code here.