Post thumbnail: 11 CSS Parallax Effects

11 CSS Parallax Effects

Collection of hand-picked free HTML, CSS and JavaScript parallax effect code examples.

Related Articles

  1. jQuery Parallax Plugins and Examples
  2. CSS Scroll Effects
  3. CSS Animated Backgrounds

Author

  • oscicen

Made with

  • HTML / CSS / JavaScript

About the code

Mouse Move Parallax

Simple parallax in HTML and CSS with little vanilla JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Guilmain Dorian

Made with

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

About the code

Parallax Effect

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

Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari

Responsive: no

Dependencies: -

Author

  • Janne Aukia

Made with

  • HTML / CSS / JavaScript

About the code

Parallax Shadows

Mobile-friendly parallax shadows.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adrian Payne

Made with

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

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Alex O'Neal

Made with

  • HTML / CSS

About the code

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!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sil van Diepen

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Only Parallax

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Yago Estévez

Made with

  • HTML (Pug) / CSS

About the code

CSS-Only Parallax Effect

No Javascript required. Just plain CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Booligoosh

Made with

  • HTML / CSS / JavaScript

About the code

Parallax Image Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: rellax.js

Author

  • jakob-e

Made with

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

About the code

Page Top Parallax

Page top parallax (SVG + CSS Variables).

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Casey Callis

Made with

  • HTML / CSS / JavaScript

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, parallax.js

Author

  • Ravi Dhiman

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Parallax Background

Pure CSS background parallax.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

back to top