The experiment starts with an interactive map of Middle-earth. It may not feel like it, but this cinematic part of the experience was built with just HTML, CSS, and JavaScript. North Kingdom used the Touch Events API to support multi-touch pinch-to-zoom and the Full Screen API to allow users to hide the URL address bar. It looks natural on any screen size thanks to media queries and feels low-latency because of hardware-accelerated CSS Transitions.
Clicking or tapping a location in the map reveals a second layer with horizontal parallax scrolling, again built just with HTML, CSS, and JavaScript. Eventually users reach an immersive WebGL-based 3D environment optimized for Android phones and tablets with high-end GPUs. These environments also use the Web Audio API for interactive audio.
The multi-device web is evolving rapidly, and we’re looking forward to more sites like “A Journey Through Middle-earth” that show the potential of the platform’s latest mobile features. For a deeper technical case study, check out North Kingdom’s new HTML5 Rocks article about using WebGL in Chrome for Android. We’re also planning to host a Google Developers Live session with the team in early December; circle +Google Chrome Developers for details.
Posted by Max Heinritz, Product Manager and (Tolkien) Troll Evader
