5532c4ef86ac3db85c98e951_asset-parallax-06.svg
553533850149842768587def_asset-parallax-03.svg
553545d7c38d07f15f2e656a_asset-parallax-09.svg
553545f42e5234f25f72f58d_asset-parallax-10.svg
5532c7da86ac3db85c98e978_asset-parallax-02.svg
553549fb2e5234f25f72f64d_asset-parallax-04.svg
5532c4f6777d17b75ce86d0d_asset-parallax-05.svg

Parallax with CSS only

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

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

553555e401498427685884a0_asset-parallax-08.svg

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.