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

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

Creator

  • oscicen

Programming language

  • HTML / CSS / JavaScript

Information the code

Mouse Move Parallax

Simple parallax in HTML and CSS with little vanilla JavaScript.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Guilmain Dorian

Programming language

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

Information the code

Parallax Effect

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

Browser Support: Chrome, Edge, Firefox (partial), Opera, Safari

Responsive: no

Dependencies:

Creator

  • Janne Aukia

Programming language

  • HTML / CSS / JavaScript

Information the code

Parallax Shadows

Mobile-friendly parallax shadows.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Adrian Payne

Programming language

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

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Alex O’Neal

Programming language

  • HTML / CSS

Information 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!

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Sil van Diepen

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

CSS Only Parallax

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Yago Estévez

Programming language

  • HTML (Pug) / CSS

Information the code

CSS-Only Parallax Effect

No Javascript required. Just plain CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Booligoosh

Programming language

  • HTML / CSS / JavaScript

Information the code

Parallax Image Gallery

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: rellax.js

Creator

  • jakob-e

Programming language

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

Information the code

Page Top Parallax

Page top parallax (SVG + CSS Variables).

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Casey Callis

Programming language

  • HTML / CSS / JavaScript

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, parallax.js

Creator

  • Ravi Dhiman

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Parallax Background

Pure CSS background parallax.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: