Grow your CSS skills. Land your dream job.

Building a Book

  • # February 19, 2013 at 4:24 pm

    Oh boy. So first the explanation. I’m trying to make a fullscreen (or fauxscreen) book with a page turning effect. On each page it initially prints the page title and the first line of text. Clicking an area in the page will then reveal/print the next section of text. This proceeds until all text on the page is displayed. You can then go to the next page if you want. The background of the pages will be a custom image. On the left is a sidebar that will slide out when hovered over. In the sidebar are links to the separate pages. The sidebar will also have a custom background.

    I’m pretty sure I’ve figured out how to do this across jquery, css, etc. However…It’s…alot. Before I jump in to this and spend an untold amount time coding/troubleshooting…I wanted to know if there was an easier way to do this in another program. I was thinking that maybe Flash would let me do something similar.

    # February 19, 2013 at 5:05 pm

    I don’t think reverting back to old technology will be beneficial to you.

    From what you’ve described, it doesn’t sound like you’d have that much trouble doing this. What about using Ajax to load in the next page of text and maybe using some sort of jQuery to flip the page (like this – use arrow keys or drag the corner)?

    # February 19, 2013 at 5:09 pm

    What you are describing is spookily similar to the feature-set of [FlippingBook](http://flippingbook.com/ “”). The only 2 major downsides are the a) the service costs money and b) it does use Flash. However, depending on your point of view, these compromises may be acceptable given that (as you eluded) it would be really challenging to hand-craft a solution to the level of quality that they have.

    # February 19, 2013 at 5:22 pm

    @tomrogers123 What about turn.js which I mentioned above? If he doesn’t need support for IE7 and below, I’d go with that. Plus, the commercial license is considerably less compared to FlippingBook.

    # February 19, 2013 at 9:25 pm

    Much appreciated for the replies, guys. I think I’m gonna end up going with turn.js or something like it, and just go through as many languages as need be.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".