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:
- window.addEventListener("MozOrientation", function(e) {
- /* 3 values: e.x, e.y, e.y */
- }, 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:
- div {
- -moz-transition-property: background-color, height, width, font-size;
- -moz-transition-duration: 2s, 1s, 2s, 1s;
- -webkit-transition-property: background-color, height, width, font-size;
- -webkit-transition-duration: 2s, 1s, 2s, 1s;
- }
- div video {
- -moz-transition-property: width, height;
- -moz-transition-duration: 2s, 2s;
- -webkit-transition-property: width, height;
- -webkit-transition-duration: 2s, 2s;
- }
Someone’s also put together a cool demo that puts the new accelerometer support with some SVG to create a Super Mario Kart clone:
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);
Brad, you of all people should know where this “ultimate perversion of SVG filters” is coming from ;)
Shouldn’t the three vales be e.x, e.y, and e.z?
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.
@tj111 – Probably because they would then be hosting them, instead of getting vimeo to do it for free.
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!
Oh, that is excellent news. Didn’t realize they were adding gradients as well.