Under the Hood – Into the Arctic site
A few weeks back, GreenPeace’s Into the Arctic site caught our attention. It allowed you to follow an expedition to the North Pole, with the goal “to declare it protected on behalf of all life on earth”.
Lofty and worthy aims, coupled with a very sophisticated use of animation and interaction, including what at first glance appears to be animated 3D maps.
Which is very cool, but probably only something a small percentage of their visitors who have WebGL enabled in the browser might see.
Interactive 3D maps with just simple 2D images, CSS3 Transforms, and a touch of SVG
But what’s this? It works on devices and in browsers without webGL? Hmmmmmm.
In fact, the developers have done something very clever. The map is actually a stack of absolutely positioned elements, with a judicious use of SVG for the lines between each camp location (the circles with the + in the middle, which are simply div elements).
The animation appears to be done with JavaScript, rather than CSS animations and transitions, an interesting choice.
By choosing this approach, the developers
- get a much wider range of devices which will experience the rich experience they’ve worked hard to create, since CSS 3D Transforms are far more widely supported than WebGL
- have a much smaller download size overall compared with using an animated image or video
- have created a more interactive experience as compared with using an animated image or video, as you can explore the map
I suspect we might start seeing more uses of this pseudo 3D technique, particularly with mapping. So, if you’re looking at adding a bit more interaction, animation and oomph to your maps make sure you check out Into the Arctic.
Technologies referenced in this article
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
