FlipCatalog

Home / Use cases / Turn.js / Brochures

// Library × use-case · Brochures

Turn.js for Brochures

A working recipe for building a brochure flipbook with Turn.js, setup, the use-case-specific patterns that matter, and the alternatives worth checking.

★ 7,475 NOASSERTION JavaScript Use case: Brochures

Why Turn.js fits a brochure build

A marketing brochure flipbook has one job: convert a paid-traffic visitor into a lead. The audience arrived from an ad and has zero patience for navigation chrome. Turn.js gives you the rendering layer; the conversion architecture is on you.

Turn.js sits at 7,475 GitHub stars, ships under the NOASSERTION license, and is written primarily in JavaScript. Chrome 16+, Firefox 10+, Safari 5+, Edge, IE10+ (with shims). Mobile Safari/Android Chrome supported via touch shim. If your brochure audience falls inside that support window, you can move on to implementation; if it does not, jump down to the alternatives section before writing any code. our editorial picks for Brochures are updated on every re-seed.

The right setup for a brochure

Install Turn.js with the same command as a generic build, the use-case differentiation lives in the surrounding markup, the loading strategy, and the analytics, not in the install:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="turn.min.js"></script>

The minimum-viable initialisation is intentionally close to the library’s minimum working example so you can see a page-turn working before customising:

<div id="magazine">
  <div class="page"><img src="page-1.jpg"></div>
  <div class="page"><img src="page-2.jpg"></div>
  <div class="page"><img src="page-3.jpg"></div>
  <div class="page"><img src="page-4.jpg"></div>
</div>

<script>
$('#magazine').turn({
  width: 800,
  height: 600,
  autoCenter: true,
  display: 'double',
  acceleration: true,
  gradients: true,
  elevation: 50,
  when: {
    turning: function(e, page) {
      console.log('Turning to page', page);
    }
  }
});
</script>

What matters specifically for a brochure

Strip the chrome. A brochure flipbook should have at most three navigation affordances: next page, previous page, and a single, prominent call-to-action that follows the reader through every spread. Anything else is friction. Turn.js renders a four-page brochure with the same code path as a forty-page catalog, so you are not paying any complexity tax for keeping it small.

Optimise relentlessly for first-page time-to-interactive. The reader bounced from an ad; if your flipbook takes more than two seconds to render, you have already lost half of them. Lazy-load every page after the first spread, and inline the cover’s critical CSS.

The mistake to avoid

Most brochure builds put the CTA only on the last page. The reader who flips three pages and bounces never sees it. Repeat the CTA on every spread. further reading on this pattern covers the recovery playbook in detail.

Alternative libraries for a brochure

If Turn.js turns out to be the wrong fit, the libraries below are the next-best open-source picks for the same use case, sorted by GitHub star count. Each one has a deep-dive page with feature matrix, browser support, and code samples.

What to read next