Link Nudging

Friday, December 5th, 2008 @ 9:59 am | filed under: MooTools, Visual Effects

David Walsh has a nice little effect featured in the footer of his blog. He writes of it:

Link nudging is the process of adjusting the padding on a link slightly to show a simple, tasteful “jump” when you place your mouse over a link. The effect is magnified when mousing on and off a link quickly.

Here’s the code:

$$('#footer-topics-1 a').each(function(el) {
	var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });
	el.addEvents({
		'mouseenter': function() { fx.start({ 'padding-left': 20 }); },
		'mouseleave': function() { fx.start({ 'padding-left': 0 }); }
	});
});

This entry was posted on Friday, December 5th, 2008 at 9:59 am and is filed under MooTools, Visual Effects. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “Link Nudging”

  1. SixtyMonkey Says:
    December 7th, 2008 at 11:14 pm

    What about…

    $$('#footer-topics-1 a').each(function(el) {
    el.set('morph', {duration:300, link:'cancel'}).addEvents({
    'mouseenter': function() { this.morph({ 'padding-left': 20 }); },
    'mouseleave': function() { this.morph({ 'padding-left': 0 }); }
    });
    });

  2. Aaron N. Says:
    December 8th, 2008 at 8:21 am

    That would work just fine, too. The only issue here is that this instance of Fx.Morph could be accessed and altered by using the .morph shortcut again. If your work had any chance of morphing that object again you might want to segregate the instances. Still, a pretty rare edge case. I’d probably write it as you have it above.