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 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/

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 touch

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,

1) index.html

2) style.css

3) script.js

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.
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. 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.

About these ads

18 thoughts on “CSS3 Coverflow animation for iOS – Adding Touch gestures

  1. Pingback: Coverflow animation using CSS3 3D Transformations – Part1 « Joseph's RIA Lab

  2. Thank you for this. I was using jquery touch punch but I am unable to get the “smoothness” in transitions. Going to give this a try. Thanks for the post!

      • This gives me better control over the movement compared to touch punch I feel. Works great. Although my animation code has some bugs which is why it is still a bit choppy. And ofcourse performance goes down since I am dynamically adding more and more covers as I swipe forward. But swipe works just fine. Thanks!

      • Hi Kiran,
        Just try to improvise on the code that I wrote, I am sure that you will have better results. Even my code needs a bit of cleaning. I will work on the dynamic no. of images and landscape support as well. Using CSS3, I found the animations to be much smoother and more realistic and it is light weight as well. I hope you have tried the demo link in an iOS device..
        Thanks.
        Joseph

  3. Well the problem is two parts. Something is off with my calculations on moving left/right. But the main reason for the sluggishness is the increased number of covers. Max of 60 and I start paginating. I tried this on an Android and Ipad. I am working on hiding covers that are no longer in view. Thanks.

    • Yes, you might have problems with large number of covers with my demo code. I used only a fixed 7 images. Somehow you have to write a logic to automatically handle more number of images. I am also trying that.
      Thanks.
      Joseph

      • Well after taking a break for day the solution is pretty straightforward. Thanks to your swipe functionality I already have what I need. Since I can have as many as 60 covers on the page, I simply keep track of how far I have swiped forward and then just opacity 0 the earlier covers, and then fade them back in as I go backwards in the coverflow. This keeps my “visible” covers at always 20 and keeps the performance consistent without bogging down.

        Maximum points for your swipe tutorial. Awesome.

      • Hi Kiran,
        Great that it helped you and that you have been able to solve the issues. Looking forward to see a demo of your creation (if possible :)).
        Thanks.
        Joseph

  4. Hi Joseph,
    Can you please share your code if have provided the support in landscape mode/dynamic adding of images. I am newibee to Js and don’t know how to make it support for landscape.
    Thanks,
    Sushil

    • Hi Sushil,
      I have not developed anything for supporting the landscape mode. But if you want the code for portrait mode, then you can checkout the code in the demo.
      Thanks.
      Joseph

  5. Hi Kiran,
    Can we get to see your demo please if you are done with renewing of your domain and can you also please the source code?
    Thanks,
    Sushil

  6. Is there anyway to adjust the sensitivity on the drag? Example: I would like to swipe finger and it just go to the next image, rather then jump all the way to the end or multiple images over.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s