Build a smooth horizontal parallax gallery in DOM/CSS/JS, then upgrade it to GPU-powered WebGL (Three.js) with shaders.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

A step-by-step guide to building a horizontal parallax image gallery, starting with a pure DOM/CSS/JS implementation using custom smooth scrolling via lerp interpolation and getBoundingClientRect-based parallax transforms, then migrating the same effect to a GPU-accelerated WebGL version using Three.js. The WebGL version covers camera setup for pixel-perfect DOM synchronization, shader-based object-fit cover UV calculation, and parallax achieved entirely through UV manipulation in GLSL fragment shaders. The tutorial also covers code architecture refactoring to separate scroll logic, 2D gallery, and WebGL scene management into distinct modules.

Creating a Smooth Horizontal Parallax Gallery: From DOM to WebGL

Syncing DOM with WebGL: The GLMedia Class

(Optional) Exercise: Adding Touch Support