1.0Overviewso, basically...

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.

Services

Details

  • Built on top of a non-standard grid layout.
  • Orchestrated subtle parallax animations throughout site.
  • Developed very difficult button animation feature.
Screenshot of website developed for Signal

2.0Special Highlightslet me draw your attention to...

Animation of scrolling parallax developed for Signal

2.1Less is More

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

3.1Navigations

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.

Navigation developed for Signal

Play with the code!