I’m trying to make a full page transition whilst scrolling like this:
I have found a Plugin on https://codyhouse.co/demo/page-scroll-effects/fixed.html
Could anyone show me how to use this plugin, or if possible, recreating that effect without codes?
Here is my public share link: LINK
This is absolutely do-able in Webflow without the plugin, with just a little bit of custom code:
Insert a div, give it a class e.g. sections-wrapper and nest all of your cd-section elements inside of it
Insert a HTML Embed element inside of the sections-wrapper and paste the following code:
- Set the position of cd-section to relative and set the top position to 0px
- Finally, give each cd-section a combo class (1, 2, 3, 4, 5 etc.) and give each consecutive section a higher z-index than the previous i.e.the first section could be z-index 1, next section z-index 2 etc.
And that should be you set! If everything works, each time a section reaches the top of the viewport it should stick as the next section (with a higher z-index) continues to scroll up overlapping it.
Let me know how you get on.
Thank you so much Ryan @RHD, you’ve saved me from a bunch of problems. I’ve done implementing the plugin from codyhouse, but when switching to mobile devices there were errors.
For the z-index part i haven’t yet set but it has worked perfectly.
Awesome - no worries at all @quannguyenjn. Glad I could help!
Hello ! Thanks @RHD, I followed your instruction but nothing move when i scroll. I must have forgotten something…