Need help! Layered effect on scroll + hiding sections on scroll

Hi there,

I am moving a client’s website off Wordpress (finally!) and recreating it in Webflow. They really like the scrolling effect on their current website, which it looks like was achieved with a lot of javascript. Here’s the current site: www.coloniaverdenyc.com

Here’s what I’m trying to achieve using IX2 in Webflow:

  • Once I’m scrolled to the main navigation section, I want that to snap into place like an “Absolute” component, so it’s not possible to scroll back to the Logo and Intro sections.

  • Clicking on “Menus” will make the menus section slide up from the bottom of the screen, and like the Navigation section, snap into place so you can’t scroll to other sections. Clicking back would take you back to the main navigation section.

I am trying to achieve all this as a single page site.

I’ve shared the public link to the project below.


Here is my public share link: LINK
(how to access public share link)

Hi - just trying to bump this up. If anyone has ideas, I would very much appreciate the help!

Hi @SGatz,

Sorry about not getting back to you sooner, I saw this question popup a few days ago but was working on a project myself.

So as far as the stop/snap feature, I am not sure this would probable without some custom code. But it looks to be a single page site with 100% w/h features, overflow:hidden, and some z-index movements.

I would recommend building it all out in sections for each page (to be a one page layout). For the menu you could use the Tab element. But it does look like a idangerous.swiper.js effect is happening tho. The link to download: Swiper

You will need to know code to implement this feature and unfortunately, this is beyond my knowledge or SOW!

Good luck, hope I was able to answer your question?

Brandon

Hi @QA_Brandon,

I’m not too worried about the scroll & snap - I actually found scrollify.js that creates that “snap” effect without the additional “sticky” effect that the current site has. However, I’ve gotten much closer by using the scroll into view animation to hide the previous section. Here’s where I am so far: https://colonia-verde.webflow.io/

I am actually trying to figure out how to get a layered “parallax” effect between sections. I was able to achieve this between the first two sections by setting the hero section to fixed, then the subsequent section, which I’m calling “intro”, to relative, with a blank section as a buffer. But how can I get the third section, the “main nav” to also look like it is a layer above the previous section when I scroll?

Hopefully I am describing that in a way that makes sense… This is the closest example I could find to what I am trying to achieve but wasn’t able to recreate it with my layout: http://layered-scroll-demo.webflow.io/

Hey just set each following section at a higher z-index. But keep in mind that the sections at the top of the navigator are always at the highest z-index already. U can always just arrange ur sections for that first.

However, i would recommend buildout ur sections first then worry bout layering and animation later.

I’ll have to look later tho! It’s late here.

Hi SGatz, I still can’t figure out how to make my section scroll in, and make the section before that hidden. How did you do it? Thanks!