CSS-only parallax effect

[Gandalf]

I have forked a CSS-only parallax codepen and have been playing around with it to make it a bit more useful. I’ve managed to do one or two things with it, but I’m struggling to understand how it work, and in particular I’m trying to figure out how to make some sections less than 100vh high.

This is my modified pen.

[PaulOB]

That parallax is a complicated effect but basically it changes the perspective of the image to 3d and rotates it on the z-axis which means that as you scroll up the image doesn’t appear to scroll at the same rate as other content due to the fact that the image is angled away from you and its perspective is fixed at the centre. The image then needs to be scaled up otherwise it wouldn’t fill the area required.

However there is a problem in ios where that technique no longer works.

iOS 13 Broke the Classic Pure CSS Parallax Technique | CSS-Tricks

@Gandalf

’m trying to figure out how to make some sections less than 100vh high.

You can make some sections 50vh high but it won’t look as effective.

.section2{min-height:50vh}

This old article explains the technique much better than I did but is still quite complicated to grasp

https://keithclark.co.uk/articles/pure-css-parallax-websites/

[Gandalf]

@PaulOB

it changes the perspective of the image to 3d and rotates it on the z-axis … The image then needs to be scaled up otherwise it wouldn’t fill the area required

Ah - I understand better.

Thanks for explaining.