Flipbook Codepen May 2026

We create a container (the book) and individual pages. We use the <input type="checkbox"> trick to handle the flipping logic without complex JavaScript, though you can also use buttons.

<div class="scene">
  <h2>Click the pages to flip</h2>
<div class="book">
    <!-- Page 4 (Front) -->
    <div class="page">
      <div class="front">
        <p>Page 1 - Front</p>
        <span class="click-hint">Click to flip</span>
      </div>
      <div class="back">
        <p>Page 1 - Back</p>
      </div>
    </div>
<!-- Page 3 -->
    <div class="page">
      <div class="front">
        <p>Page 2 - Front</p>
      </div>
      <div class="back">
        <p>Page 2 - Back</p>
      </div>
    </div>
<!-- Page 2 -->
    <div class="page">
      <div class="front">
        <p>Page 3 - Front</p>
      </div>
      <div class="back">
        <p>Page 3 - Back</p>
      </div>
    </div>
<!-- Page 1 (The Cover or Back) -->
    <div class="page">
      <div class="front">
        <p>Back Cover</p>
      </div>
      <div class="back">
        <!-- Empty or End page -->
      </div>
    </div>
</div>
</div>

If you want to study existing professional code, these are the standard "Flipbook" types on CodePen:

document.getElementById('prevBtn').addEventListener('click', () => 
  currentFrame = (currentFrame - 1 + totalFrames) % totalFrames;
  drawFrame(currentFrame);
);
document.getElementById('nextBtn').addEventListener('click', () => 
currentFrame = (currentFrame + 1) % totalFrames;
drawFrame(currentFrame);
); flipbook codepen
document.getElementById('slider').addEventListener('input', (e) => 
currentFrame = parseInt(e.target.value);
drawFrame(currentFrame);
);
// Optional: Thumb-drag flip simulation (mouse drag)
let isDragging = false;
canvas.addEventListener('mousedown', (e) => 
isDragging = true;
let startX = e.clientX;
let startFrame = currentFrame; We create a container (the book) and individual pages
function onMouseMove(moveEvent) 
if (!isDragging) return;
let deltaX = moveEvent.clientX - startX;
let frameDelta = Math.floor(deltaX / 15); // sensitivity
let newFrame = startFrame + frameDelta;
newFrame = ((newFrame % totalFrames) + totalFrames) % totalFrames;
drawFrame(newFrame);
currentFrame = newFrame;

function onMouseUp() 
isDragging = false;
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
 If you want to study existing professional code,
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
);

CSS sample to help:

.book  touch-action: pan-y pinch-zoom;  /* allow vertical scrolling but not horizontal pan interfering */
.page  -webkit-user-select: none; user-select: none;