Parallax with CSS only

WebfLow designer page

This 8 layers vertical parallax is made in Webflow with some line of custom CSS code. No Javascript. 

All the images are SVG. The method is long and has some downsides, requires a few fine tuning. And you can’t really control the length of the final page. I don’t recommend this method for a full production site. It’s more an experiment. You can duplicate this site and analyse the settings. Below is the custom CSS code added to the site’s dashboard. 

<style></style>
/* CSS Vertical Parallax */
* { -moz-box-sizing: border-box; box-sizing: border-box; }
.parallax-e3 {-webkit-perspective: 100px; perspective: 100px; height: 100vh; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; left: 50%; right: 0; bottom: 0; margin-left: -50%; }

.layer-p1-e3 { -webkit-transform: translateY(-1000px) translateZ(-600px) scale(7); transform: translateY(-1000px) translateZ(-600px) scale(7); }
.layer-p2-e3 { -webkit-transform: translateY(-1200px) translateZ(-500px) scale(6); transform: translateY(-1200px) translateZ(-500px) scale(6); }
.layer-p3-e3 { -webkit-transform: translateY(-50px) translateZ(-200px) scale(3); transform: translateY(-50px) translateZ(-200px) scale(3); }
.layer-p4-e3 { -webkit-transform: translateY(210px) translateZ(-150px) scale(2.5); transform: translateY(210px) translateZ(-150px) scale(2.5); }
.layer-p5-e3 { -webkit-transform: translateY(240px) translateZ(-100px) scale(2); transform: translateY(240px) translateZ(-100px) scale(2); }
.layer-p6-e3 { -webkit-transform: translateY(54px) translateZ(-50px) scale(1.5); transform: translateY(54px) translateZ(-50px) scale(1.5); }
.layer-p7-e3 { -webkit-transform: translateY(38px) translateZ(-25px) scale(1.25); transform: translateY(38px) translateZ(-25px) scale(1.25); }
/* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;} /* Blend modes */ .mbm-normal{mix-blend-mode: normal;} .mbm-multiply{mix-blend-mode: multiply;} .mbm-screen{mix-blend-mode: screen;} .mbm-overlay{mix-blend-mode: overlay;} .mbm-darken{mix-blend-mode: darken;} .mbm-lighten{mix-blend-mode: lighten;} .mbm-color-dodge{mix-blend-mode: color-dodge} .mbm-color-burn{mix-blend-mode: color-burn;} .mbm-hard-light{mix-blend-mode: hard-light;} .mbm-soft-light{mix-blend-mode: soft-light;} .mbm-difference{mix-blend-mode: difference;} .mbm-exclusion{mix-blend-mode: exclusion;} .mbm-hue{mix-blend-mode: hue;} .mbm-saturation{mix-blend-mode: saturation;} .mbm-color{mix-blend-mode: color;} .mbm-luminosity{mix-blend-mode: luminosity;}

The structure in Webflow is as follow:

parallax layer 1
SVG image
×
parallax layer n
SVG image
×
parallax layer front
SVG image
×
parallax
body

This code and structure comes from an experiment on CodePen by Jim Thornton

Parallax with CSS only

Made with Webflow (sorry not tweaked for mobile yet)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.