Flip Book Using CSS



My daughter came home with a poem she wrote at school, and it was so cute that I decided to create an online flip book out of it. I wanted it to be completely responsive so it would look like a book on any screen size, which wasn’t easy when two pages have different content side by side. How I resolved this issue is explained below.

First I’ll explain how I made the book. I created two style rules, one for the right page and one for the left. One page is slightly darker than the other to give the look of a seem in the middle. There are five page turns triggered by the arrows on the bottom of the book (forward and backward). The first two pages are visible while the rest are hidden. Clicking the forward arrow will calls a JavaScript function that will increment the index of the right page and left page class arrays and set the display to block and the previous to none thus displaying the next set of pages while hiding the previous set. Likewise, clicking the back page arrow does the same in the opposite direction.

I set the style using div tags. See the picture showing the initial style display set. The first left/right is set display: block and the rest are set display: none.

Responsive Difficulties Solved

Since I’m essentially working with two side by side boxes representing my pages, I need them to be exactly the same size, and they need to remain the same size regardless of the viewing screen size. I have an image on the right and I played around with setting font size and padding using many different combinations of CSS units. I even tried setting breaking points, but this didn’t give me total size continuity. At some screen size point, the box sizes were off. I solved this by using images exactly the same size on both pages. This way both pages grow and shrink at exactly the same rate and are always the same size.