TOP 11 CSS Parallax Effects

MOUSE MOVE PARALLAX

Simple parallax in HTML and CSS with little vanilla JavaScript.

PARALLAX EFFECT

Optimised for Google Chrome, some problems appear on Mozilla with background-clip: text;

PARALLAX SHADOWS

Mobile-friendly parallax shadows.

3D CSS PARALLAX DEPTH EFFECT

Playing with CSS translate and rotate transforms based on mousemove (sorry mobile users) to simulate some z-axis depth on the card and individual movie characters.

IMAGE CUTOUT, PARALLAX EFFECT: CSS + SVG

This works on desktop/laptop, but not on mobile. Make an SVG cutout of the same background color as your background. Make a parallax background with CSS. Use the same proportions as your SVG. Place an img of your SVG inside the HTML for your parallax div. Align and size parallax background as you like. Don’t forget to make things responsive!

CSS ONLY PARALLAX

CSS-ONLY PARALLAX EFFECT

No Javascript required. Just plain CSS.

PARALLAX IMAGE GALLERY

PAGE TOP PARALLAX

Page top parallax (SVG + CSS Variables).

PARALLAX GRID

I used parallax.js to set up this interactive panning image grid. Uses cursor position if you’re on a desktop or laptop.

PARALLAX BACKGROUND

Pure CSS background parallax.