Parallax Image pro

A picture inside a frame that moves slower than the page for an instant sense of depth.

Scroll inside the preview to try it.

Customize

Picture address, for example /images/hero.jpg (empty = gradient)

Text over the picture (empty = none)

Gradient used when there is no picture

Frame height (px)

How much the picture lags behind. Higher = more depth

Corner roundness (px)

import ParallaxImage from './ParallaxImage';

<ParallaxImage />

Checking your access…

Dependencies: none