News

Site of the week: Max Adventure

Take a stroll through a virtual valley, speak to the animals and bag yourself a discount on an exclusive T-shirt

maxmain

maxmain

One of the hottest front-end web design techniques for some time has been parallax scrolling. By applying independent motion to layered images and moving them gently on scroll, an illusion of depth is achieved.

Most commonly this trick is used with flat backgrounds or photographic overlays purely as a decorative effect. With a design like Max Adventure, a promo mini-site for Italian retailer Max Sport, parallax scrolling is used to turn a single horizontal page into something more immersive. The rolling landscape layers are a backdrop for a game-like journey to find clues and answer questions to reach your goal.

As the central character scuttles through the scene, at various intervals you will encounter four animal characters posing questions. Each is supported by clues, based around a retrieval of relevant paragraphs sourced via the Wikipedia API.

SVG graphics and an array of jQuery plugins do most of the visual legwork while the cute illustration work comes courtesy of Ale Giorgini. His collaborations with Max Sport and site designers We Are Zaion culminated in the exclusive T-shirt design Max Adventure now promotes. Throughout the journey we also get atmospheric forest sounds served very simply by a looping  <audio> tag. Combine all these subtle multimedia tricks and you end up with a unique URL brimming with creative charm!

max01

 Speech bubble elements are shown to signify interactive elements required for progressing successfully

max02

Reach the end to grab a discount link back to Max Sport and pick up your T-shirt

×