How to replicate document flip-through like in Papier website

Hi! I’m fairly new to Webflow and would like to ask for your help on how I can replicate the “flick-through the diary” part shown on this [page](Full of Heart | Academic Year Diary | Papier) on Papier.

Some things I like about it:

  • the buttons lead you to specific pages
  • the images can not be saved by the viewer (right-click shows a blank page)
  • loads fast

Thank you so much! :slight_smile:

There are quite a few solutions out there.
You can go with a free JS lib like Turn.js, which has quite a nice player;

Drag from the top right corner to turn pages, or use arrow keys or the slider to page quickly. Some things like the ToC are interactive too. Quite smooth.

Turn.js details are here, click on other books on the shelf to demo it as well. The top right book, titled Hacking, is the full docs for turn.js. Super slick.

I think you might call that meta documentation.

If you want something fancier jQuery-based, with a one-time fee, Envato has a bunch of good ones. Flipbook jumped out at me for its smoothness as well. Drag whole pages, from any point on the page. Supports video and hotspots, as well as arrow keys. Mousewheel allows zoom in. Even a lightbox mode.

Quite a few more listed here.

1 Like