Scrolling Nav Bar Animation

[tm]

Trying to recreate the navbar on https://hxouse.com/ ..

Any way on how to go about the styling and functionality of it.. its a fixed scrolling nav that shows the name of the section youre on.. and animates the list elements to get bigger and small..

[Beverleyh]

I had a quick glance but didn’t inspect the specifics of how its actually being done. The way I’d think about doing it is;

• CSS for base styling (get the main nav position and look sorted first). Additional nav element fade/size animations to also be done with CSS and defined against an additional class that can be added/triggered at a given scroll position (look into basic transitions using opacity and transforms with scale, and/or more advanced keyframe animations).

• JS for watching scroll positions of each section in the viewport. When a new section reaches the desired level, trigger fade/size animation on the associated nav element.

Here’s an example using a similar logic, although not to animate a nav bar, but to trigger changes on surrounding page elements and background colours http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view-reduced.htm

• Notes/explanation at the bottom.
• Article linked at the top.
• Script in the source code.

The logic
1. Watch a “trigger” element as the page scrolls.
2. When the “trigger” element appears in the bottom of the viewport, add a class to a “target” element (trigger and target can be the same thing, or different).
3. The newly added class triggers a CSS animation.

You’ll probably recognise this as being another “scroll intention JavaScript”. There are others out there, such as ScrollMagic, so Google the phrase above (and variations) for many more alternatives, then you can build/recreate your nav menu however you like.

[tm]

Looking more so now on how to get the styling of the navigation.. any suggestions??

[Beverleyh]

You can use the developer toolbar to inspect how the other site has done it – that’s F12 in most browsers. Inspect each element in turn and check out the applied CSS in the styles pane. From there you can extract the pertinent code (HTML and CSS) and use it to visually replicate/build your own navigation.

[Author]

Posts