The experiment was created using just HTML5, and the environment is built entirely with markup and CSS. Like set pieces on stage, divs, images and other elements are positioned in a 3D space using CSS. To create movement, CSS animations and 3D transforms were applied making the elements appear closer and further away. Everything is positioned and scaled individually to create a highly realistic interactive environment. In addition, the experiment uses HTML5 <audio> to play music and sounds.
Movi.Kanti.Revo breaks with the tradition of keyboard or mouse navigation; instead users navigate through an interactive Cirque du Soleil world with their gestures. To accomplish this, the experiment asks users for permission to access their web cam using the new getUserMedia API. With this new API, the experiment renders the camera output to a small <video> element on the page. A facial detection JavaScript library then looks for movement and applies a CSS 3D transform to the elements on the page, making environment move with the user.
Because this experience was built using just markup, it works in the browser across all devices. The experiment takes advantage of the rich capabilities possible on mobile devices, like the accelerometer to navigate through the world.
To learn more about how this experiment was built, check out the new technical case study or join us for a special Google Developers Live Behind The Divs event on September 20th at 8:30am PDT /15:30 UTC where we’ll be talking to the engineers behind the project.
Head over to Movi.Kanti.Revo at www.movikantirevo.com to check things out, and be sure to open Chrome’s developer tools to see what’s going on behind the <div>s!
Pete LePage, Developer Advocate
DIGITAL JUICE
No comments:
Post a Comment
Thank's!