The more I learn about web development, the more I come to realize that JavaScript and jQuery are not always the way. Long-thought the answer to difficult layout situations brought on by mobile, the current trend is moving away from both technologies as much as possible. And soon enough, it will be harder to implement said technologies as well.
That’s why Patrick B. Gibson’s pure-CSS implementation of background-changing top-navigation elements is so nifty.
How did he accomplish this without jQuery? Essentially, Gibson created a custom <div> class for each of the example works featured on the Portfolio page (e.g., “Flinto,” “Sandwiches,” etc.). And then, as the user scrolls the page and transitions to a new section, absolutely-positioned duplicate navigation elements are presented to the user using clip-path:
The nav bar elements (some svg, some just text/css) are positioned statically, so they move with the page scroll, but are actually duplicated (and styled differently) for every section, and clipped to their respective section using clip-path: inset(0,0,0,0), so that they appear/disappear for the various sections as the user scrolls. This looks especially cool when the logo changes from the regular to inverted one, as seen in this shot. All with no JS required!
And in my quest to understand how Gibson worked his magic, I stumbled upon this gem buried in the parakeet.css stylesheet:
Parakeet is a design studio focusing on “icons, illustrations, and visual identity.”
(via Louie Mantia)