When we go to apple's website: sbsstatic/maintenance.html?start=0&tstart=0">https://discussio开发者_JAVA技巧ns.apple.com/sbsstatic/maintenance.html?start=0&tstart=0

and we do some zooming (Ctrl + and Ctlr -0), we can see the top bar has a sliding effect while we are zooming.

Does anyone know of any ideas how would/could that be implemented?

There is no onzoom event even in HTML5:

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

"One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width, and thus unaffected by page zoom. If you insert two elements, one with a position in percentages, and one with the same position in pixels, they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level."

http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128

Yes!

Yes, write a keyboard event handler or us a Library like this: http://www.openjs.com/scripts/events/keyboard_shortcuts/

This is using some CSS Animation tricks. There's a tutorial here.

A sample of the type of style (from the above tutorial) that will give you the effect your looking for:

<div style="-webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2);">...</div>

You can take a look at their "enhanced" style sheet that sorts this out here.