What the Frontend? Open the interactive gallery →
3D & WebGL

Depth map parallax

A 2D image given the illusion of depth by using a separate depth map — near elements move more.

What you're seeing

A flat illustration or photo that appears to have layers — hover and the foreground shifts more.

Where you'll see it

Hero illustrations, character art, product visuals.

Difficulty

Medium — 3/5

Libraries that build it

custom JSGSAPCSS

Ready to prompt — paste this into your AI coding tool

"Split image into layers by depth, translate each on mousemove by [depth factor × offset], use CSS transforms"

Related 3D & WebGL effects

Floating 3D objectShader distortionParticle system3D textWebGL image hoverNoise terrain
See the animated preview in the dictionary →