The Dangers of Drug Driving

‘The Dangers of Drug Driving’ is an interactive piece developed for Evans Halshaw to showcase the effects various drugs can impact on your ability to drive. It was featured as Awwwards Site of the Day in September 2013, as well as in Net magazine 249.

It was a good excuse to get creative with some animations as it‘s not often I get to make a burger float underwater, or have a hovering hedgehog on my screen.

The Neurons section, accessible by dragging the Drag element on the Brain section and dropping it on the Drop To Zoom element is made up of four layers which each move at different speeds based on the position of the mouse. This was achieved by having an 8x8 grid that sets two data attributes (data-x and data-y) on the container depending on which part of the grid the mouse is in. The individual elements then have CSS 3D transforms set up with transitions on to create visual depth.

To keep the performance levels up of the piece, transform: translate(); was used wherever possible for animations/transitions instead of modifying the top or left values. Plus another benefit being the transforms allow much smoother movement visually.