Hello,

this is the smooth font resize for css class “.bump” effect.
Just put class=”bump” on the items you want and use the following javascript somewhere on your page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.addEvent('domready',function() { 
 
	//scaling values
	var scale_px=6;
	var scale_em=0.3;
 
	var bumps=$$('.bump');
	bumps.each(function(bump, i){
		var init_size=bump.getStyle('font-size');
 
		var units=init_size.match(/em/)!=null ? 'em' : init_size.match(/px/)!=null ? 'px' : false;
		if(units===false) return false;
 
		var size_up=(init_size.toFloat()+(units=='em' ? scale_em : scale_px))+units;
		var fx=new Fx.Morph(bump, {duration:90, wait:false, transition:Fx.Transitions.Back.easeOut});
 
		bump.addEvent("mouseenter", function(event) {
			fx.start({
				'font-size':size_up
			});
		});
		bump.addEvent("mouseleave", function(event) {
			fx.start({
				'font-size':init_size
			});
		});
	});
});

Note: In order for this to work on IE7 you need to have some font-size defined in your css for every “.bump” on your page. Otherwise font-size will return “100%”, and it get’s impossible to know how to resize – i’ve tried it – damn IE :/

You can check it working here, on the links under “We Provide:”.
Tanks :)

[del.icio.us] [Digg] [Facebook] [Twitter]

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.