1.0Overviewso, basically...

The challenge was to develop a content-rich, single page website to match designs by Groundwrk. In part, this entailed a unique dynamic, one-page blog loading feature. I also pitched creative flickering neon animations to add interest, and built a truly one-of-a-kind “rock on” menu activator.

Services

Details

  • Brought blog to single page site with dynamic loading feature.
  • Applied creative flickering neon animations to many elements.
  • Engineered unique “rock on” hand menu activator.
Screenshot of website developed for The Music Range

2.0Special Highlightslet me draw your attention to...

2.1Page Within a Page… Pageception?

Since this was a single page site, the blog couldn’t lead users away, as all content needed to appear on just one page. To accomplish this, I built a feature that dynamically loads links to blog posts, and then a popup that dynamically loads the post content when the user requests it. The result is full, highly efficient access to the blog without ever leaving the page.

3.0Technicalfor the geeks

3.1Rock On, Navigation…

We had talked about maybe having the “hamburger nav” simply turn into drum sticks instead of a close “X” on the mobile nav to thematically match the site’s content, but I decided to pitch something a bit more over-the-top: a “rock on” gesture on activation, and “peace out” gesture on deactivation. It’s pretty much just a class toggle with some extra JavaScript for accessibility added on top, but the orchestration for growing and rotating the stripes—or “fingers” in this case—involves some interesting CSS. Enjoy!

Navigation animation developed for The Music Range