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:

screencast acelerometro firefox

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:

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:

svg mario kart

Referencias:

hacks.mozilla.org

blog.mozbox.org

ajaxian.com

Animate a decir lo que piensas, deja un comentario