Tuesday, October 13th, 2009

Firefox Trunk: Accelerometers, WebGL, and CSS Transitions

Category: Firefox

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:


  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:


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:

  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:


[via Chris Heilmann]

Posted by Brad Neuberg at 7:30 am

4 rating from 34 votes


Comments feed TrackBack URI

javascript:b=document.getElementsByTagName(“body”)[0];t=b.innerHTML;b.innerHTML=null;w=b.appendChild(document.createElement(“div”));w.innerHTML=t;w.style.height=”100%”;w.style.width=”100%”;w.style.MozTransformOrigin=”50% 0″;b.style.overflow=”hidden”;i=0;window.addEventListener(“MozOrientation”,function(e){if(++i==2)w.style.MozTransform=”skewx(“+-60*e.x+”deg)”;i=i==2?0:i;},true);

Comment by KristianK — October 13, 2009

Brad, you of all people should know where this “ultimate perversion of SVG filters” is coming from ;)

Comment by hansschmucker — October 13, 2009

Shouldn’t the three vales be e.x, e.y, and e.z?

Comment by tj111 — October 13, 2009

You guys seem it add inline vimeo videos semi-regularly, why don’t you do inline .ogv videos for the (probable) majority of us that can view them? Sorry for the double post.

Comment by tj111 — October 13, 2009

@tj111 – Probably because they would then be hosting them, instead of getting vimeo to do it for free.

Comment by GordonStanton — October 14, 2009

Finally transitions! Sure it’s gonna be a little bit more till they get into public builds but at least I can plug the code in now and when it’s turned on, everything’ll work.

Now, can we get some reflections and gradients in the house!

Comment by iliad — October 14, 2009

Oh, that is excellent news. Didn’t realize they were adding gradients as well.

Comment by iliad — October 21, 2009

Leave a comment

You must be logged in to post a comment.