Making a Easy Horizontal Parallax Gallery: From DOM to WebGL

Horizontal scroll galleries with parallax results have turn into a staple of contemporary internet design. You’ve most likely seen numerous tutorials on this impact, and for good motive. It’s visually putting and provides depth to what would in any other case be a easy picture carousel.

However right here’s the factor: most implementations are purely DOM-based, utilizing CSS transforms and JavaScript to maneuver parts round. Whereas this works superb for easy circumstances, it could possibly shortly turn into janky if you’re coping with a number of photographs, heavy parallax calculations, and {smooth} animations all working on the primary thread.

You’ve most likely come throughout Camille Mormal’s portfolio a shocking instance of how fluid and performant a horizontal gallery will be. What units it aside? It’s all rendered in WebGL. The smoothness comes from offloading the heavy lifting to the GPU, the place these operations thrive.

This obtained me considering: what if we may construct this impact step-by-step, beginning with a conventional 2D DOM method after which elevating it to WebGL? Not solely would this present the efficiency advantages, however it could additionally demystify how these results really work beneath the hood.

On this tutorial, we’ll create a horizontal parallax gallery in two methods:

1. The 2D method: utilizing HTML, CSS, and JavaScript with customized {smooth} scrolling and parallax transforms
2. The WebGL method: utilizing Three.js to render every thing on the GPU with shader-based parallax for buttery-smooth efficiency

We’ll preserve dependencies minimal (solely Three.js for the 3D half) and concentrate on understanding the core mechanics: how {smooth} scrolling works, how parallax is calculated, and the way to synchronize DOM measurements with WebGL rendering.

Let’s dive in.

The Preliminary Setup

For this tutorial, we’ll preserve issues easy and centered. No advanced construct instruments or heavy dependencies simply Vite for quick growth and Three.js for the WebGL half in a while.

Venture construction

Right here’s what our challenge appears to be like like:

├── css/
│   └── base.css
├── public/
│   ├── 1.webp
│   ├── 2.webp
│   └── ... (10 photographs complete)
├── src/
│   ├── gallery/
│   │   └── gallery.css
│   ├── utils/
│   │   └── math.ts
│   └── important.ts
├── index.html
└── package deal.json

Dependencies

{
  "dependencies": {
    "three": "^0.170.0"
  },
  "devDependencies": {
    "typescript": "^5.6.3",
    "vite": "^6.0.3",
    "vite-plugin-glsl": "^1.3.0"
  }
}

That’s it. We’re utilizing:

• Vite for bundling and dev server
• TypeScript for sort security
• Three.js (we’ll add this later for the WebGL model)
• vite-plugin-glsl to import shader information (additionally for later)

HTML Construction

Let’s begin with the markup for our gallery. It’s intentionally easy, a wrapper and a container with photographs: