I have a basic markup structure as follows:
<ul> <li> <a href="#" title="Whatever">Whatever</a> </li> ... </ul>
Now I’m curious: is it possible to make the links behave like leaves on a tree (not “falling” leaves but just normal leaves that rustle around a bit organically)?
For example, let’s say I have a set of links (using the above markup) using this effect… What I envision is as follows:
1.) The links would simply hang there, dangling, as if clinging to the UL element or something. They’d have some subtle / smooth motion to indicate their animated nature, similar to wind chimes, but they’d be relatively stationary.
2.) When a user moves the mouse over the links, it would be akin to wind blowing them around a little, jostling their axis. But still, they’d remain stationary.
3.) If the user stops the mouse over one of the links, the respective link would still remain stationary but orientate itself into a “stable” usability position (whether that be horizontally or vertically-aligned).
This sounds weird, I know, but if you saw the design I’m working on, you’d understand where I’m going with it.
So, long story short, is this possible? If you think about a set of wind chimes and then envision the wind as being your mouse cursor, that’s basically what I’m after here (whereby the cursor can make individual links “freeze” on hover() until blur() is activated and then the link returns to it’s dangling nature).
Make sense? Is something like this possible with jQuery? I’ve never seen it done and I can’t find anything remotely close to it in my searches.