CSS Opening Book Effect

[doolz77]

I have created an opening book with four pages. This uses CSS3 only (at the moment). I have added animation where the book opens after 2 seconds, then subsequently a few pages flip over.

Here is the example http://codepen.io/doolz77/full/amkgr/

What I am trying to create is

1. When someone clicks on a page no. it take them to the relative page.
2. After they have selected and read the page, they can then navigate to the next or previous page
3. Or they can click on ‘contents’ and it then take them back to the front page.
   How would I go about doing this? Would I need javascript? Any help would be very much appreciated!

Thanks!!

[Paulie_D]

Javascript would most certainly be required.

I’m not sure I like the empty li that you have (which I assumed are required for the animation to work) it seems…unnecessary.

Not that I can offer any particular insight but it would make sense for each ‘page’ to be represented by a single li.

Given that JS/JQ is going to be required I’ll move it over there.

[Author]

Posts