Table of Contents

MOUSE MOVE PARALLAX

Simple parallax in HTML and CSS with little vanilla JavaScript.

Author

  • oscicen

Made with

  • HTML / CSS / JavaScript

PARALLAX EFFECT

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

Author

  • Guilmain Dorian

Made with

  • HTML (Pug) / CSS (Less) / JavaScript

PARALLAX SHADOWS

Mobile-friendly parallax shadows.

Author

  • Janne Aukia

Made with

  • HTML / CSS / JavaScript

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.

Author

  • Adrian Payne

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

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!

Author

  • Alex O’Neal

Made with

  • HTML / CSS

CSS ONLY PARALLAX

Author

  • Sil van Diepen

Made with

  • HTML (Pug) / CSS (SCSS)

CSS-ONLY PARALLAX EFFECT

No Javascript required. Just plain CSS.

Author

  • Yago Estévez

Made with

  • HTML (Pug) / CSS

PARALLAX IMAGE GALLERY

Author

  • Booligoosh

Made with

  • HTML / CSS / JavaScript

PAGE TOP PARALLAX

Page top parallax (SVG + CSS Variables).

Author

  • jakob-e

Made with

  • HTML / CSS (SCSS) / JavaScript (TypeScript)

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.

Author

  • Casey Callis

Made with

  • HTML / CSS / JavaScript

PARALLAX BACKGROUND

Pure CSS background parallax.

Author

  • Ravi Dhiman

Made with

  • HTML (Pug) / CSS (SCSS)