26 CSS Parallax Effects

About a code

Parallax Photo Columns with CSS Scroll Linked Animations

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

Responsive: yes

Dependencies: scroll-timeline.js

About a code

Disney Wall Parallax. Only CSS

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

Responsive: yes

Dependencies: -

About a code

Easy Parallax Effect with background-attachment: fixed

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

Responsive: yes

Dependencies: -

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

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

About a code

CSS-Only Horizontal Parallax Gallery

A few beautiful photos from Paris in this experimental gallery. Uses transforms together with perspective property for parallax.

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

Responsive: yes

Dependencies: -

About a code

Pure CSS Multilayer Parallax

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

Responsive: yes

Dependencies: -

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

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

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

About the code

Parallax Shadows

Mobile-friendly parallax shadows.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

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

About the code

CSS Only Parallax

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

Responsive: yes

Dependencies: -

About the code

CSS-Only Parallax Effect

No Javascript required. Just plain CSS.

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

Responsive: yes

Dependencies: -

About the code

Parallax Image Gallery

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

Responsive: yes

Dependencies: rellax.js

About the code

Page Top Parallax

Page top parallax (SVG + CSS Variables).

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Parallax Scroll

Simple parallax scroll with a fixed background.

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

Responsive: yes

Dependencies: -

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

About the code

Parallax Background

Pure CSS background parallax.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Card

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

Responsive: yes

Dependencies: -

About a code

CSS Parallax Orbs

Inspired by Sims 4.

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

Responsive: no

Dependencies: -

About a code

Responsive Magazine Spread

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

Responsive: yes

Dependencies: -

About a code

Parallax Landscape CSS Only

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

Responsive: yes

Dependencies: -

About a code

Pure CSS Parallax Effect (Depth of Field)

Use pure CSS create parallax effect with depth of field. And a little bit pop-up photo browser.

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

Responsive: yes

Dependencies: -

About a code

Parallax World of UGG

A parallax experiment with the World of UGG landing page.

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

Responsive: yes

Dependencies: -