Few Questions/General Help

Hi,

In the middle of redesigning my personal landing page. I’ve drafted up my mockup in Illustrator as usual to prepare for the build and spent 15 minutes this morning creating the general layout on Webflow (Ignore the broken mobile view, messy sections and alignment issues - They’re all being fixed tomorrow!). Below are what I’m trying to achieve (Mockup) but unsure how to add these into Webflow. Any examples or tutorials would be great.

https://crtyxio.webflow.io

  1. I’d like to make it so each section has a lower opacity when not selected. So end user would click one of the options on the bottom nav and it will display the corresponding section in full opacity whilst keeping the others faded.

  2. Would like to have a sticky bottom nav bar on desktop/mobile and tablet - Unusual I know but it goes with an idea I’m working on - How would I achieve this?

Thanks,
Curtis


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I’d assume you can use the interactions feature for this. You can set up an interaction for “When scrolled into view” or probably in your case you’d be using the “While scrolling into view” one and set up different interactions based on what part of the viewport the element is at. For example, once the element has scrolled through 50% of the page, dim the opacity to 70%.

Here’s a link to Webflow’s interactions course: https://www.youtube.com/watch?v=kDEgVDHR6Vk&list=PLPmnoMVpkxfj9ReU098A_GNXCuDJd5F2A