Skip to content

Posts tagged ‘accelerometer’

14
Out

Firefox accelerometer

Paul Rouget shows off some cool new demos that are bak­ing on the trunk of Fire­fox currently.

First are some nifty new events that get fired if your com­puter has an accelerometer:

JAVASCRIPT:

  1. win­dow.addE­ventLis­tener(“MozOri­en­ta­tion”, func­tion(e) {
  2. /* 3 val­ues: e.x, e.y, e.y */
  3. }, true)

It works with Mac­Books and on Win­dows and Linux with Thinkpads.

Check out this cool screen­cast of the ori­en­ta­tion event in action:

orientation_demo

They also have WebGL and CSS Tran­si­tions going in Fire­fox trunk now as well! There are some demos in the orig­i­nal blog post of WebGL + CSS3 + SVG as well as CSS Tran­si­tions + the HTML5 Video tag that are very cool (require Fire­fox Nightly).

Here’s an exam­ple code snip­pet show­ing how you can use CSS Tran­si­tions to change the back­ground color of a DIV over time as well as chang­ing 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. }
  8. div video {
  9. –moz-transition-property: width, height;
  10. –moz-transition-duration: 2s, 2s;
  11. –webkit-transition-property: width, height;
  12. –webkit-transition-duration: 2s, 2s;
  13. }

Someone’s also put together a cool demo that puts the new accelerom­e­ter sup­port with some SVG to cre­ate a Super Mario Kart clone:

mario_orientation

Fonte:Ajax­ian

Bad Behavior has blocked 67 access attempts in the last 7 days.