The Ask

Like jumping into a cold, serene lake.

The wind in the trees, the ducks in the distance, and the feeling of the bubbles on your skin. So ephemeral, so personal and profound.

In comes Body of Water, an audio visual essay by the incredibly talented Veronica Simmonds and Katie Mckay (part & parcel), celebrating the lake swim and perfectly striking that delicate tempo that only a crisp, quiet lake can provide.

Take a Quick Dip
The What

Audio vignettes drive a dynamic parallax scroll experience

In Body of Water, the user is presented with a proposition to slow down, take a deep breath, and take a dip through their screens. The site is driven by short audio vignettes that lead the visitor through the stages of a lake swim. As the user scrolls, parallax functionality brings bright illustrations (by Rebecca Roher), photographs, and videos to life.

The How

The audio needed to be smooth.

Browser optimization and performance was paramount for this site, because above all, the experience needed to be smooth. With 14 active videos, numerous high-res visuals, animation and parallax effects, the site needed to manage its media loading very carefully. Making extensive usage of HTML5 media capabilities, the site is fully responsive, with elements coming alive as the user scrolls the page.

The Where

Lightweight, zone-based audio and actions

For this, I built a custom jQuery plugin that allows for flexible control of any element based on the users scroll position; this handles the smooth fading in and out of the audio, photos, triggering of videos and animated elements. What resulted is a lightweight media agile platform that is adaptable for just about any modern web digital media project- perhaps it is the perfect tool for your project, too.