Skip to content
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
js
README.md
demo.html

README.md

FLIP UI

FLIP UI is pure html, javascript solution to bring flipboard like UI in iPhone as webpage.

How to Use?

Something goes here


makeflip(<DOM selector>,<width>,<height>,<html array of content>);

How Code Works?

My approach is simple I used basic CSS3 attribute


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

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.

This code flip 90 degree for first half of the flip and back to zero degree for second half of the flip, To fake half page flip it adds mask at the top during the first half of the flip and then, mask moved down for the second half.

Problems on iPhone's Safari

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

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

READ More

http://www.markandey.com/2011/12/flipboard-like-ui-on-iphone-safari.html

Limitations!

  • It flickers sometime
  • Works only on chrome and iPhone

Demo?

You can see working Demo Here http://www.purplegene.com/static/flip3.html

Something went wrong with that request. Please try again.