Reply To: Scrolling Nav Bar Animation

[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.