Edit: Got a request by mail the other day on how this could made centered and not draggable, but still have the aero look. So I've updated the example to change between the two modes.
At my company, we recently started a complete redesign of our website (the old one was from 2000, so it was about time), and the designers decided to go with an aero-look. I'm sure you're with the term standardized by Microsoft. Initially I thought: Oh, we're gonna have to make that an illusion by just making the whole damn thing a 3-part image (top, repeater, and bottom), to make it look like a window on a background. Which works fine, since the interface isn't made to make you believe you can drag the window around or anything.
But then I thought: What if we wanted to do that? How could we do it?
The result was a lot easier than I would have guessed. A little gaussian blur and a couple of lines of jQuery, and we can make a draggable window inside a webpage act like a desktop window. The basic idea is to use masking inside a div. For those not familiar with the term of masking, it's basically just a way of cutting an image at certain points. In this case, the draggable div would be the mask, that tells the page where we want the blurred background to show:
There's no hocus pocus to the jQuery. Just an event for mousedown on the header, then mousemove and mouseup to record the movement. Moving the div in one direction, and moving the (blurred) background image for the div the opposite direction. Pretty easy, right? I told you.
Demo (warning: heavily depended on CSS3, so don't even think about viewing in IE...)
Comments
Sweet! Stadig vekk imponert over hva man kan få til med jQuery!
Very cool. Looks and works great in Chrome!
Way cool!
If only IE could do things like this. :(
Very nice! It has a few bugs, though. Namely, if you move it fast enough, it keeps selecting the text.
Also, if you drag it off the screen in the up direction, it moves the background image as well.
Thanks guys.
Derrick: Yeah, I know about the text selections. I guess there are some ways to handle it. You could put another mask on top of the window when dragging to avoid, maybe. It should deselect as soon as you stop moving it, though. And thanks for pointing out the top bug. I guess it's because of the negative values, I'll have to look into that (:
nice collect it to http://ajax.wespai.com
Looks amazing.. It does not work (drag) however in firefox 3.6.3..