I had a simple and obvious idea to make the browser history a timeline, rather than a list of links that changes when you revisit something. Then I looked at the Chrome history and I saw that it already worked this way. It was only not obvious to Firefox, I suppose.
To be specific, once the user want to "inspect" a html element, I use a flying animation to jump from the web preview window to the corresponding source code in the html/css/js code editor.
Alas, the state of the web today is that every website should feel the need to ignore my desktop settings and re-invent the UI — to some degree of success. I have a beautiful theme, and it seems to me a shame that web browsers (and sites) ignore it. We should not be re-inventing the UI for each web site we design. (And it should not be the websites implementing basic UI elements.)
Better, I think, would be a way to hook into the user's UI toolkit and UI preferences, and theme them. That way, the web site behaves like the rest of the UI environment, but can be themed to match your corporate style. (If you've ever seen FreeCiv on Linux, that might be a good example: it uses GTK, and the settings, but themes the widgets for the game.)
press tab from the username field and the 4 L-shaped corners flown from there to password.
was neat, but they removed it recently... at least I'm not getting it anymore.
I released it just two days ago.
Some of the mildly frustrating elements of using websites include not knowing where "I" am on the page. facebook, in particular, has some conventions that leave me confused and fumbling around for where I was typing a lot. This particular trick wouldn't fix it for facebook, but I'm pretty likely to add this to my current and future web UI projects, assuming it works reliably across browsers and doesn't interfere with other JS libraries I'm using.
(the music, was it µ-Ziq? it sounds like him)
I'd suggest to use the highlight color:
box-shadow: 0px 0px 2px 3px highlight, 0px 0px 2px highlight inset
Hardcoding colors for different OS-s might be more reliable.
It seems like in a perfect open source world, a change like this should be simple to at least propose (pull request).
When using the mouse, the transition is implied so it's annoying.
Great work though!
The OpenLaszlo implementation animates four shadowed corner chevrons that interpolate between the corners of the current widget to the corners of the next widget, so they are are not as obtrusive as animating a whole rectangle (drawing a bunch of rectangles over each other tends to look cluttered, while the corner chevrons are not as visually distracting), and they work well between differently sized widgets.
The OpenLaszlo animation is a bit slower than the animation shown in this demo, and I think the slower speed of OpenLaszlo's animation works better for drawing your eye between one widget and the other.
This demo seems to move faster than eye tracking speed, and the animation appears to skip or flicker, and it go too fast to follow, especially if the widgets are far apart.
I didn’t use OpenLaszlo-style corners because I wanted to keep the native look as much as possible.
Regarding the speed:
Currently the transition duration is constant; it’s always 0.1 seconds regardless of the distance between the source and the target. I’m considering to make the duration variable and velocity constant so it would take more time for longer distance.
(Can't find a live demo, but looks like this: http://cl.ly/image/3Q2g0a182M46)
Unfortunately, it doesn't seem to work in Ubuntu at all in either Chrome or Firefox.
It looks way better in Chromium, since it's got the correct focus color and the animation looks more smooth. Firefox is way more jerky and the color/outline is all wrong.
I still like it, even in Firefox, because it's such a nice addition!
You could extend it to all the tabbable elements on the page too. So once you've tabbed outside of the form element, the blue glow files to the next link, or the address bar in the browser and so on...
What doesn’t work, exactly? No visual changes?