働くフィドルはここにあります:http: //jsfiddle.net/WyXLB/1/
HTML要素に複数行のテキストが含まれている場合、それぞれをスキャンしたいと思います。現時点では、要素全体の外接する長方形をスキャンしています。
いくつかのコードは:
function run_scan(el,mask,callback) {
// we need to go over each line of text in here
// or somewhere
var el_font_size = $(el).css('font');
$('body').append(sizer);
sizer.css({
'position': 'absolute',
'font' : el_font_size,
'white-space' : 'pre' } );
var real_box = window.getComputedStyle(sizer[0]);
var real_width = parseFloat(real_box.width);
var real_height = parseFloat(real_box.height);
var lines = Math.round($(el).height()/real_height);
var mask_offset = $(mask).offset();
var origin_left = mask_offset.left;
var duration = parseFloat($(mask).width())/2.0;
$(mask).animate( {
'left':origin_left+$(mask).width()
},
{
duration:duration,
complete:callback
} );
}
境界の長方形全体でアニメーションを分割して、各行をスキャンするにはどうすればよいですか。上記の関数にanimation->callbackrecursionを入れて、呼び出しごとにマスクを1つのreal_heightずつ降ろしてみましたが、予測できない/混沌とした動作になりました。