Firefox Acelerometros, WebGL y CSS.

Si tienen una MacBook o una Thinkpads o algunas de esas pocas laps que tienen acelerometro, podrás hacer uso de MozOrientation (nueva función en las ultimas alfas Firefox) para divertirte un poco

Un screencast de lo que se puede hacer:

Codigo:

1. window.addEventListener("MozOrientation", function
   (e) {

2. /* 3 values: e.x, e.y, e.z */

3. ), true);

En el webcast se utiliza WebGL, CSS Transitions, HTML5 video tag, para ver esto en su máximo esplendor recomiendo bajar la ultima versión de Firefox Nightly (versiones alphas recuerden que solo son de prueba) en algunas MacBook puede que la orientación de los demos este al reves, pero se esta trabajando en eso para las próximas versiones de Firefox.

Aquí los demos:

• Firefox Web page moving
• Firefox logo moving
• a Web page following the computer orientation
• Daniel Glazman escribió algunos demos, vélos aquí.

Aquí un ejemplo de como usar  CSS Transitions para cambiar el color de fondo (background) de un DIV al mismo tiempo que el ancho WIDTH y alto HEIGHT de un tag de video en HTML5:

CSS:

1. div {

2. -moz-transition-property: background-color, height,
   width, font-size;

3. -moz-transition-duration: 2s, 1s, 2s, 1s;

4. -webkit-transition-property: background-color,
   height, width, font-size;

5. -webkit-transition-duration: 2s, 1s, 2s, 1s;

6. }

7. div video {

8. -moz-transition-property: width, height;

9. -moz-transition-duration: 2s, 2s;

10. -webkit-transition-property: width, height;

11. -webkit-transition-duration: 2s, 2s;

12. }

Alguien hizo un super demo con soporte al acelerometro y SVG, implementado otro demo SVG de Super Mario Kart:

Referencias:

hacks.mozilla.org

blog.mozbox.org

ajaxian.com