25 Mind-Blowing CSS Parallax Effects (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML, CSS and JavaScript parallax effect code examples. Some are pure CSS, and others are more complex.
1. Parallax CSS 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 (caseycallis)
Links: Source Code / Demo
Created on: June 14, 2017
Made with: HTML, CSS, JS
Tags: parallax, html, css, interactive
2. 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. Thanks @alice-mx for improving the calcValue math
Author: Adrian Payne (dazulu)
Links: Source Code / Demo
Created on: November 2, 2018
Made with: HTML, SCSS, Babel
Tags: css-transform, 3d mouse, 3d-css, mousemove, css
3. Magdiellop 216 Paralax Recreated With CSS
Recreated Magdiellop 216 with CSS and add a parallax effect ! From : http://www.magdiellopez.com/a-poster-a-day-v2-1/pcaj6lyntffy2qud30qmxxv9dgu968 Optimised for Google Chrome, some problems appear on Mozilla with "background-clip: text;"
Author: Guilmain Dorian (Craaftx)
Links: Source Code / Demo
Created on: November 30, 2018
Made with: Pug, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: parallax, css, retro, magdiellop, js
4. Mouse Move CSS Parallax ✨
Simple vanilla javascript parallax.
Author: oscicen (oscicen)
Links: Source Code / Demo
Created on: January 10, 2019
Made with: HTML, CSS, JS
Tags: parallax, mouse, glass, javascript, vanilla
5. Image Cutout, Parallax Effect: CSS + SVG
Author: Alex O'Neal (alexoneal)
Links: Source Code / Demo
Created on: October 28, 2018
Made with: HTML, CSS
6. CSS Parallax Shadows (Mobile-Friendly)
Author: Janne Aukia (jaukia)
Links: Source Code / Demo
Created on: November 5, 2018
Made with: HTML, CSS, JS
7. CSS-Only Parallax Effect
No Javascript required. Just plain CSS.
Author: Yago Estévez (yagoestevez)
Links: Source Code / Demo
Created on: October 6, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: parallax, effect, css, scroll
8. CSS Only Parallax
Author: Sil van Diepen (silvandiepen)
Links: Source Code / Demo
Created on: October 8, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: parallax, cssonly, nojs, images
9. Page Top Parallax
Page top parallax (SVG + CSS Variables) How to create the SVG masks: Import an image into Illustrator (or some other vector program) Select the image and size the artboard to fit the image Create a layer for each parallax part and draw a white shape to be used as mask Each layer n...Read More
Author: jakob-e (jakob-e)
Created on: May 27, 2018
Made with: HTML, SCSS, TypeScript
Tags: svg, parllax, css-variables, mask, animation
10. Parallax Image Gallery Using Figure & Figcaption
Author: Booligoosh (Booligoosh)
Links: Source Code / Demo
Created on: June 25, 2018
Made with: HTML, CSS
Tags: codepenchallenge, cpc-figures
11. Pure CSS Parallax Effect
Author: Joshua Bemenderfer (tribex)
Links: Source Code / Demo
Created on: April 9, 2017
Made with: HTML, CSS
12. Pure CSS Parallax Scrolling
Following along a tutorial by codegrid
Author: Carlos (CarlosVieira)
Links: Source Code / Demo
Created on: May 3, 2018
Made with: HTML, CSS
13. Pure CSS Parallax Scrolling
A prototype parallax scrolling technique that uses CSS 3D transforms. No JavaScript! An article about this technique is available here: http://keithclark.co.uk/articles/pure-css-parallax-websites/ A newer version can be found here: http://codepen.io/keithclark/pen/vNqxQJ
Author: Keith Clark (keithclark)
Links: Source Code / Demo
Created on: January 21, 2014
Made with: HTML, CSS
Tags: parallax
14. CSS Scrolling Parallax Effect
Shows how to achieve a scrolling parallax effect using CSS and HTML.
Author: Sebastian Schepis (sschepis)
Links: Source Code / Demo
Created on: June 15, 2014
Made with: HTML, SCSS
Tags: css, parallax, scrolling parallax, html5, layout
15. Firewatch Parallax In CSS
I recreated the parallax header on the Firewatch website in CSS. It was originally meant as a daft experiment but it seems to have blown-up. I've base-64 encoded the images to avoid hot-linking to the Firewatch site.
Author: Sam Beckham (samdbeckham)
Links: Source Code / Demo
Created on: December 16, 2014
Made with: HTML, SCSS
16. Pure CSS Parallax Scroll
Sectional page divided by parallax scroll and reveal containers. Due to performance issues, the displacement effect is ignored on iOS.
Author: Antoine Laly (lantoine)
Links: Source Code / Demo
Created on: July 18, 2019
Made with: HTML, CSS
Tags: parallax, scroll, ios, pure-css, css
17. CSS-only Parallax Scroll
Author: Karl Danninger (karldanninger)
Links: Source Code / Demo
Created on: November 24, 2017
Made with: HTML, Less
18. CSS Animations
CSS animations , plus a little JS.
Author: Anonymous (Fibonaccifreak)
Links: Source Code / Demo
Created on: June 25, 2020
Made with: HTML, CSS, JS
Tags: css-animations, js-animation, parallax
19. Parallax Effect
Author: Maria Briceño (bsmaria)
Links: Source Code / Demo
Created on: July 1, 2020
Made with: HTML, CSS
Tags: parallax, parallax-effect, perspective
20. Parallax Background
Author: Ravi Dhiman (ravid7000)
Links: Source Code / Demo
Created on: September 4, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css parallax, parallax background, scss, jade
21. Parallax Scrolling Effect CSS
Simple Parallax Scrolling Effect using Pure CSS. Learn to make this --> https://thecodingpie.com/post/simple-pure-css-parallax-scrolling-effect-tutorial-thecodingpie/
Author: thecodingpie (thecodingpie)
Links: Source Code / Demo
Created on: June 25, 2020
Made with: HTML, CSS
Tags: parallax-scrolling-effect, css, parallax, beautiful
More Awesome Lists:
Share: