3

I am trying to create an html layout that is similar to Flipboard's page flip animation.

First I thought to use some jQuery library to achieve this, but none of them seems to have all the features that I need. For example one of the libraries is BookBlock, but it uses CSS transitions for the animation, so I can't control the flip when I move my finger back and forth.

After some research I have found this excellent demo that looks almost exact match for what I need, but it flips pages like a book, from left to right and I need this from bottom to top.

I have spent couple of hours trying to change various CSS and JavaScript properties from this demo, but I did not succeed much in changing the page's flip direction.

I do not expect somebody to write code for me but I would be glad if someone could point me in the right direction or any other suggestion.

KishuDroid
  • 5,411
  • 4
  • 30
  • 47
Excaliburez
  • 31
  • 3

1 Answers1

0

First things first,

if you want something for long term, i would suggest you to go with some library similar to bootstrap or semantic UI (my favorite)

for the finger back and forth which is swipe left and right use hammer.js

On swipe left you can initiate the flip transition

Build it smaller and modular, you will eventually reach your goal

Community
  • 1
  • 1
Venkat Reddy
  • 1,046
  • 1
  • 8
  • 13