3

Open this page on Chrome or Safari and fiddle with the zoom level. You'll notice a cute easing effect on its elements when you change the zoom level.

Apparently this only works on Chrome and Safari (webkit?), but how is this done? And is there a cross-browser way to do this?

Aillyn
  • 23,354
  • 24
  • 59
  • 84
  • 1
    Check Out http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript (Similar One) – Neel Basu Sep 29 '11 at 19:09
  • However I doubt aren't they looking for Ctrl+/- Key stroke Events ? or Ctrl + Mouse Roll ? cause That way will be even simpler and you don't even need to run a timer by yourself. – Neel Basu Sep 29 '11 at 19:12
  • @NeelBasu Which would be wrong, since it would break if you are using the browser's menus instead of shortcut keys. It also wouldn't work at all on Mac OS X. The one Google is using is the real deal. – Aillyn Sep 29 '11 at 19:14
  • Yes It would be mathematically wrong. But Most people uses Ctrl and Mouse for Page Zooming instead of Menus. So You can well utilize this trick. and Its better than repeated checking in some interval. – Neel Basu Sep 29 '11 at 19:18
  • @Neel: Many people on Macs use trackpad gestures to zoom pages. – icktoofay Sep 29 '11 at 20:24
  • I dont know anything about Mac actually. I was searching for a better backdoor anyways. – Neel Basu Sep 30 '11 at 04:17

2 Answers2

4

I figured it out. JavaScript is not involved, it's pure CSS.

Namely, webkit's -webkit-transition property: 

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

EDIT: Upon further research, I found out most browsers (ie: everything but IE) support a vendor specific transition CSS property. However, only webkit browsers use transitions when the page is resized.

See demo on jsfiddle

Aillyn
  • 23,354
  • 24
  • 59
  • 84
  • 1
    A curious effect: if you add `-webkit-transition:all .218s;` to the `a` element on this page in Chrome's inspector, you get this nice "scroll" effect on all the UI images, which I suspect is an accidental effect caused by the underlying image sheet these graphics come from. – namuol Sep 29 '11 at 20:53
  • Right click anywhere on the page and choose "Inspect Element". Then, on the right in the inspector you should see a "+" icon next to the Style accordion section. Click that to add a rule like this: `a { -webkit-transition:all .218s; }`. This causes all changes to properties of `a` elements to "transition" over 0.218 seconds. So for example, when you hover over the "flag this comment" icon, the background image changes - but it uses a single image to store all UI icons, so really the background *position* changes - the result is that you have the background image scrolling which is quite nifty – namuol Sep 30 '11 at 02:41
0

I dont think there is any (cross-browser) direct way of listening to page zoom event. There are some backdoors described on Catch browser's "zoom" event in JavaScript . however I think you can listen to Ctrl + + / - OR Ctrl+Mouse Wheel Event.

Community
  • 1
  • 1
Neel Basu
  • 12,638
  • 12
  • 82
  • 146