turn.js
The page flip effect for HTML5
A jQuery plugin that adds a realistic book page-turn animation to web pages, HTML content flips like the pages of a physical magazine when visitors click or drag, including on touch devices.
turn.js is a jQuery plugin that adds a realistic page-flip animation to web pages, making HTML content look like the pages of a physical book or magazine turning. When a visitor clicks or drags a page, it folds over with a visual effect that mimics paper, including gradients and shadows. It works in modern browsers and also supports touch devices.
To use it, you create a container element in your HTML with child elements for each page, apply some CSS to set the size, and then call a single JavaScript function on that container. The plugin handles the animation from there. The README includes a short code example showing the HTML, CSS, and JavaScript needed to get started.
The library requires jQuery 1.7 or later. It supports Chrome, Safari, Firefox, and Internet Explorer 9. The fourth release added options for auto-centering and zooming, new methods for controlling the flip, and improved animation performance using the browser's built-in animation timing. A separate file for HTML4 browsers was also added in that release.
The license is a non-commercial BSD license, meaning it is free to use for personal and open-source projects but not for commercial purposes without checking the terms. Full documentation is available on the project's wiki.
Where it fits
- Add a realistic page-flip effect to an online magazine, digital catalog, or e-book viewer.
- Build an interactive HTML portfolio that visitors flip through like a physical book.
- Create a touch-friendly page-turn experience for a product brochure on mobile devices.
- Embed a flippable presentation or lookbook in a website with a single JavaScript function call.