Parallax with CSS only

WebfLow designer page

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

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

/* 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); }

The structure in Webflow is as follow:

parallax layer 1
SVG image
parallax layer n
SVG image
parallax layer front
SVG image

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.