Yume

揺れる文字の作例を発見

最近は動画編集にハマっていて、PremiereとAfterEffects、更にはMotion5に興味津々なわけですが、先日、AfterEffectsのチュートリアルサイトを探していると、揺れる文字の作例を発見しました。

AfterEffects揺れる文字

あれ？これJSで再現できるんじゃね？
よくリンク先のページを読むとわかるんですが、変化させているプロパティは

• letter-spacing(字送り)
• font-size(文字サイズ)
• position(文字位置)

となります。

この項目を確認したら、できるよねーッと思ったのでやってみました。

他のサイトであまり見たことないので、ふふーーんやったねと思ったのですが、使いどこがあまり見当たらない感じですね。
マウスオーバーの時に少し震えさせてあげたりすると面白いんだろうか？

以下にソースを。

var shakeLetter = function(){
var shake = function(){
	var timer;
	clearInterval(timer);
	timer = setTimeout(function(){
		var tops   = rd(105, 100);
		var left   = rd(100, 95);
		var fs     = rd(300, 270);
		var letter = rd(2, 0);
		$('.pageTitle').css({
			'top': tops,
			'left': left,
			'font-size': fs + '%',
			'letter-spacing': letter + 'px'
		});
		shake();
	}, 10);

	var rd = function (m,n){
		var randnum = Math.round(Math.random()*(m-n))+n;
		return randnum;
	};
	shake();
};
shakeLetter();

2014年12月22日：追記
調べてみると結構あるんですね。
そりゃそうか、、
プラグイン化されてるので、僕もプラグイン化をしようと思います。
またできたら報告します。
2014年12月22日：追記ここまで