SpotGeek.net » accelerometer http://spotgeek.net Tecnologia , Programação , web , internet, php Sat, 04 Feb 2012 14:42:19 +0000 en hourly 1 http://wordpress.org/?v= Firefox accelerometer http://spotgeek.net/firefoxaccelerometer/ http://spotgeek.net/firefoxaccelerometer/#comments Wed, 14 Oct 2009 16:21:13 +0000 Filipe Teixeira Nunes http://spotgeek.net/?p=472 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. }
  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 accelerometer support with some SVG to create a Super Mario Kart clone:

mario_orientation

Fonte:Ajaxian

]]> http://spotgeek.net/firefoxaccelerometer/feed/ 0