How to add scrolling effect like this here?

[Salvo-R (Salvatore Ragusa)]

Hey guys,

is it possible to add an effect like this one here (in the Step Sports) ?
Can someone explain me how to do this? I’d appreciate this.

---

Here is my public share link: http://www.step-sports.de/
(how to access public share link)

[sabanna (Anna)]

Hi, @Salvo-R

Could you be more specific? What exactly you call “scrolling effect” there?

Cheers,
Anna

[Salvo-R (Salvatore Ragusa)]

Hey @sabanna,

thank you for answering…

I am talking about the effect (kinda parralax) in the bottom.
When you see that woman with next to the form. After this, the bottom stays static and the rest of the page moves up and down, concerning how you are scrolling.

The bottom I am talking about starts here:
“UNVERBINDLICHES BERATUNGSGESPRÄCH:” “CTA-Button”

I really like this.

[jbleroux (Jeremy)]

https://preview.webflow.com/preview/jeremy-leroux-s-fresh-site?preview=a0efabf9e2315924aabe0203ced735d3

Here is a demonstration site just using colors and a few divs or sections

The effect is achieved by setting the bottom div or section to position fixed and bottom.

Make the second to last section or div the exact same height as the bottom section for instance I made them 50VH and then set the background of that section to transparent.

For all of you sections except the bottom set to position relative, and set the Z index to above the Z index of the bottom section. For instance I set the other sections to position relative and Z index of 3. The bottom section is z index of 1. The higher z index will appear on top of the lower Z index.

Hopefully my simple example clears it up for you. I like the effect. Might have to use that for a contact or a CTA area on a website soon.