Pages

Flipboard Like UI on iPhone Safari ( JavaScript + CSS3)


I was trying to make Flipboard like UI in CSS3 and JavaScript!! I quickly made it to work on chrome, but it sucked on iPhone, and it took ages for me to make it work.

How I made it?

My approach is simple I used basic CSS3 attribute

-webkit-transform: rotateX(180deg);
-webkit-transition-duration: 2s;

Step-1:
To achieve complete flip of a page you need to add CSS style of -webkit-transform: rotateX(180deg);

Problem with 180 flip is your HTML content goes upside down, to simulate flipboard like animation you can not flip it complete 180 degrees

Step-2:
Then i decided to just flip 90 degree and back to zero degree Demo-1, To fake half page flip i added a mask on it so that one half of animation is not visible Demo-2.


With this concept of mine I went ahead and made full page flip demo for iPhone here Demo-3.

Scan to see demo on iPhone



Problems on iPhone's Safari

1) z-order problem on webkit, with 3D transform
This mask thing could not work properly because In  iPhone's safari when a object is  3D transformed , z-order does not work properly.  I worked around it by making one half of page to transparent.

2) Touch Events of iPhone
Touch events on iPhone have some serious problem, i encountered weird problem with event propagation.


Feel free to ask any question about the Demo, Please let me know if You have better solution to emulate Flipboard UI.



2 comments:

  1. Nifty script. How might one use a local array of images instead of using a flickr feed?

    ReplyDelete
  2. htmls[0]= "<img width='300' src='http://url.com'><h1>{title}</h1>"
    htmls[1]= "<img width='300' src='http://url.com'><h1>{title}</h1>";
    htmls[2]= "<img width='300' src='http://url.com'><h1>{title}</h1>"
    ----- ------
    makeflip('#main',300,400,htmls);

    ReplyDelete

Your comment will inspire me, Please leave your comment