Complex parallax effects

Ask the community
,
1

Im bashing my head in with some custom code trying to achieve a parallax effect where each initially overlapping png moves to the side. Now, ive got to that point, however, the parallax doesnt happen linearly to the scrolling but somehow waits until youre about 30% into the embedded box and then does the effect while moving down about 40% and then again stays still while you scroll all the way down. Am i making sense? I want it to animate smoothly to the movement of the scrolling up or down motion. Here is the code. Any clue what im doing wrong? PS, the embedded code widget is set to stretch to browser width and currently on 758px height. The height is influencing the movement of the parallax… not ideal…
I have 6 more layers to add after i figure this out, 2 moving to the sides, and the other 4 moving in a traditional paralax effect to create depth.
(this is a personal experiment project, not paid work or anything lik that)

Parallax Effect body { margin: 0; padding: 0; } .parallax { height: 1000px; overflow: hidden; perspective: 1000px; } .layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s; } .layer:nth-child(1) { background-image: url(' [https://static.wixstatic.com/.../45b8a5...](https://static.wixstatic.com/.../45b8a5) '); transform: translateX(0); } .layer:nth-child(2) { background-image: url(' [https://static.wixstatic.com/.../45b8a5...](https://static.wixstatic.com/.../45b8a5) '); transform: translateX(0); }

2

Hello there. Are you able to help me withi this one please? Code to fix broken Parallax scroll bug on CMS