“So, you want a ‘bing bing bing’ or more of a ‘bloop bloop, bloop bloop, bloop bloop?’ (Lots of R2-D2 sounds go into verbalizing animations, like a blinking period in this case).
Buhv’s design team came up with a highly non-standard grid layout, and requested I develop that into a full featured WordPress website. This layout lent itself well to subtle parallax animations throughout, including a downward-drawn button stripe connector that proved challenging.
2.0Special Highlightslet me draw your attention to...
I’ve seen some pretty distracting parallax animations in my day, and with a loose, sporadic grid already requiring diligent thought to ensure users didn’t risk getting confused, moving those grid elements at varying rates could have been a disaster without great care. Signal’s animations are a subtle but still obvious, continuous shifting of elements as users scroll, gradually changing the organization of elements to ensure users don’t lose their sense of place on the page.
3.0Technicalfor the geeks
The navigation went through a few iterations (a couple are shown below) before we landed on the subtle slide in effect used on the live site. With the exception of some scroll tracking for showing or hiding the logo, the majority of the functionality is simply a class change with CSS transitions carefully timed one after another.
Play with the code!
See the Pen
Shrinker Nav by tcmulder (@tcmulder)
on CodePen.
See the Pen
Shrinker Nav v3 by tcmulder (@tcmulder)
on CodePen.
