Your SlideShare is downloading. ×
CSS3 Coverflow animation for iOS – Adding Touch gesturesActual Blog post link: http://jbkflex.wordpress.com/2012/08/21/css...
and there is also an images folder which has the images of the superheroes. I also have a download link at thebottom of th...
Upcoming SlideShare
Loading in...5
×

CSS3 Coverflow animation for iOS – Adding Touch gestures

1,236

Published on

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),
Link: http://rialab.jbk404.site50.net/coverflowtouch/
For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,236
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CSS3 Coverflow animation for iOS – Adding Touch gestures"

  1. 1. CSS3 Coverflow animation for iOS – Adding Touch gesturesActual Blog post link: http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipeacross 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 3Dtransformations 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),Link: http://rialab.jbk404.site50.net/coverflowtouch/and if you are looking for a desktop version of the Coverflow, you can check my previous post. This is how it looks on an iPod touchI 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 amtrying to do. All in all there are three files,1) index.html2) style.css3) script.js
  2. 2. and there is also an images folder which has the images of the superheroes. I also have a download link at thebottom 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.4) Very lightweight, its all custom javascript, css, html. No external libraries. No JQuery..Some of the failures are,1) I have only supported portrait mode. This doesn’t mean that the coverflow stops working in landscape mode. Itsjust that the images does not position them accordingly as per the device screen. So 320 x 416 is what I haveconsidered as my boundary for now. If you are checking this in an iPad, the images will still be smaller. You have towork 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 canalways 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 morerobust and dynamic app. I will try it definitely.

×