Firefox Trunk: Accelerometers, WebGL, and CSS Transitions

Ajaxian » Front Page • by Brad Neuberg

Paul Rouget shows off some cool new demos that are baking on the trunk of Firefox currently.

First are some nifty new events that get fired if your computer has an accelerometer:

JAVASCRIPT:

  1. window.addEventListener(« MozOrientation », function(e) {
  2. /* 3 values: e.x, e.y, e.y */
  3. }, true)

It works with MacBooks and on Windows and Linux with Thinkpads.

Check out this cool screencast of the orientation event in action:

orientation_demo

They also have WebGL and CSS Transitions going in Firefox trunk now as well! There are some demos in the original blog post of WebGL + CSS3 + SVG as well as CSS Transitions + the HTML5 Video tag that are very cool (require Firefox Nightly).

Here’s an example code snippet showing how you can use CSS Transitions to change the background color of a DIV over time as well as changing the width and height of an HTML5 Video at the same time:

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. }

Someone’s also put together a cool demo that puts the new accelerometer support with some SVG to create a Super Mario Kart clone:

mario_orientation

[via Chris Heilmann]

Cet article a été publié dans Uncategorized. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s