Collection of hand-picked free HTML and CSS parallax effect code examples. Update of March 2019 collection. 4 new items.

Related Articles

  1. jQuery Parallax Plugins and Examples
  2. CSS Scroll Effects

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS

About a code

CSS Sticky Parallax Sections

Uses position: sticky and scale transforms to create a sticky parallax effect with CSS.

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

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Parallax Hero

Parallax effect created with CSS transforms and perspective properties.

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

Responsive: yes

Dependencies: -

Author

  • Kiaan Castillo

Made with

  • HTML / CSS

About a code

Pure CSS Multilayer Parallax

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

Responsive: yes

Dependencies: -

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Whole UI without JavaScript

The whole site on pure CSS (without JavaScript): parallax scrolling; simple animation of links and buttons with the css-property cubic-bezier; smooth scrolling when click on the navigation animation of the hamburger click open/close the click menu. etc.

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

Responsive: yes

Dependencies: font-awesome.css

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: -