Follow Pointer Navigation Bar
Wow, this little project has grown and grown. Firstly, I've kept most of the content that was in the original web page, as it is still relevant to how things work when it comes to the way the animation tracks the mouse pointer as it moves over the navigation bar links.
However, when I brought the page into this site in a way that would keep the visual layout of everything in tact, it totally broke
the navigation bar at the top, because that navigation bar actually uses the same style sheets!
So, I re-built the entire thing as a custom HTML element called <follow-navbar> and added some nice quality-of-life features. Firstly, you can now control how deep you want the follow bar (the bit that tracks the mouse pointer) to be, how fast it moves and the font size of the links. You can also define the colour of the follow bar when it hovers over a navigation element by setting the 'follow-colour' attribute on each element (if it's not set, it just uses the default steelblue colour).
Now, as you can see, you can have more than one navigation bar on a page and each can have its own formatting (and of course the elements can be further formatted using CSS).
Home
About
Products
Services
Blog
Contact
Wow, so this was a bit of a nightmare to get right. The navigation bar animation is completely CSS controlled and really isn't too complicated in itself. Essentially just using an ::after pseudo element to create the coloured bar which is anchored to the left, right and bottom edges of whichever element represents its anchor point.
Initially (where the mouse isn't hovering over a "link"), the ::after pseudo element is anchored to the <nav> element itself, and so it stretches out across the width of the nav bar.
When the mouse hovers over a link, the anchor point is moved to that link element. A CSS transition is set up to animate the left, right and top positions (and colour) of the ::after pseudo element, meaning that wherever the anchor pointmoves, the coloured bar will smoothly transition its co-ordinates until they match the dimensions of the target element (link).
When the mouse leaves the element (link), the anchor point reverts back to its host nav element (the nav bar).
What made this navigation bar particularly tricky is that the nav bar background uses a backdrop-filter property to blur the image behind it. Using a filter causes the host element to create a new stacking and container context that hides any pseudo elements attached to their base element. In effect, this caused the ::after pseudo element to disappear from the nav bar when no link is active. The blur doesn't affect the link elements,as they are on a separate layer.
To get around this, I kind-of-cheated and created a nav bar container element that deals with the blurring of the background, placing the nav-bar and its ::after pseudo element on the layer above it, allowing the transitions to be correctly handled by the nav bar CSS rules. A bit ugly, but it works!
