Create a flip Magazine from HTML Tags in 4 easy Steps — Turn.js

We often come to a situation where we need to give awesome flip/book page effect to our HTML pages and make them look like real magazines and books.

Recently, I have studied a library named Turn.js (http://www.turnjs.com/). This can make beautiful flip effects on the pages based on simple HTML.

It will make your content look like a real book or magazine using all the advantages of HTML5. It is a light weighted library (10Kb) with simple and clean API.

All you need to do is to provide a container and pass an ID to an HTML tag and you are good to go. All the elements (div, span, h1) in the container will become pages and your magazine/book is ready.

You can find the working Code here.

http://jsfiddle.net/A9a7E/14984/

Below are the steps to achieve

Step 1 :- Install the dependencies — We have to include the jQuery.

Step 2 :- Add the HTML

Step 3:- Add the JavaScript

Step 4 — Add the CSS

Conclusion — Turn.js is a fantastic library to create the flip effect using HTML sections. Although it provide the various features that may be hard to implement but it comes with a dependency of jQuery.

Apart from this, it is must try library for various use cases like news, magazines and other publication portals.

Leave a Reply:

Your email address will not be published. Required fields are marked *