[Insiders] Custom parallax image leaves gap between images & content

[A3Bagged]

Currently in the middle of changing the images (tried several other parallax effects with just css but i guess i can just use material's).
However, i've made all images 2560x1400px (recommended size) currently for debugging im only using .png.

This however leaves a gap between the elements as they shift up & the content (expect).
I've tried adjusting position but no effect. It's kinda new to me that it uses the Z axis instead of Y so i don't understand how the layers "shift up" but okay. What do i change to affect the layer's speed? (fine tuning which layer goes faster etc).

I did change the css a but so it accepts my size instead of 100% width on image it's currently at 100svw.

The most annoying part that i can't seem to fix (that was fixable in a codepen example with not affecting the top layer as if it was a normal object)

_i've gave the body a background color of red so see where the top of expect is.
Seems that the "content" is snapping to the lowest layer's bottom, while the upper layers move up this creates the gap.
I've tried to keep as much insiders info secret as possible in here but if more info/code is needed i can always provide that through private messages.

When it's done, how do i keep the insiders private? i can't upload them in a repo i think or do they work from my local files? (so having certain folder/files excluded on push repo)

PS: Is there a discord for Materials or no?

Thanks in advance.

[squidfunk]

Thanks for asking. So, this also took me some time to get right on our landing page, so there's no way around fiddling with the positions and z-indexes of items. It's also why we've discontinued to make a component or configurable landing page put of this, because it needs to much fiddling and knowledge of how parallax animations work.

The general advise is to try and adjust these parameters. Maybe, some more CSS is necessary, it depends. Also, a general understanding of how CSS-only parallax animations work is beneficial, and this blog article, for example, is quite good.

[A3Bagged]

Thanks for asking. So, this also took me some time to get right on our landing page, so there's no way around fiddling with the positions and z-indexes of items. It's also why we've discontinued to make a component or configurable landing page put of this, because it needs to much fiddling and knowledge of how parallax animations work.

I did okay around with the hero.html and even added in id="{{ layer.id }}". Also tried flippig the dept's and adding z-index to the part that's then rendered and passen on through --md-parallax-index: but no effect something seems to override the z-indexes.

Best bet is to strip out the entire parallax and put one in from scratch? i did get this one up and working yesterday. Different solution would be the use of javascript but i'd like not to if not neccessary. Thank you for your answer.