explaingit

blasten/turn.js

★ 7,468JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

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.

Mindmap

mindmap
  root((turn.js))
    What it does
      Page-flip animation
      Book effect for web
      Touch device support
    Tech stack
      JavaScript
      jQuery
      CSS
    Use cases
      Digital magazines
      Online catalogs
      HTML portfolios
    Audience
      Web developers
      Designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a realistic page-flip effect to an online magazine, digital catalog, or e-book viewer.

USE CASE 2

Build an interactive HTML portfolio that visitors flip through like a physical book.

USE CASE 3

Create a touch-friendly page-turn experience for a product brochure on mobile devices.

USE CASE 4

Embed a flippable presentation or lookbook in a website with a single JavaScript function call.

Tech stack

JavaScriptjQueryCSS

Getting it running

Difficulty · easy Time to first run · 5min

Requires jQuery 1.7 or later, commercial use requires reviewing the non-commercial BSD license terms.

Free for personal and open-source projects, but commercial use requires reviewing the license terms before use.

In plain English

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.

Copy-paste prompts

Prompt 1
Help me set up turn.js to create a 10-page digital magazine from HTML divs with page-flip animation and touch support on mobile.
Prompt 2
Using turn.js, how do I enable auto-centering and add a zoom control so readers can get a closer look at pages?
Prompt 3
Show me the minimum HTML, CSS, and JavaScript I need to get turn.js working with 4 pages and a next/previous button.
Prompt 4
Help me customize turn.js so clicking the left or right edge of the book triggers a page turn, and add keyboard arrow key support.
Open on GitHub → Explain another repo

← blasten on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.