使いどころもありそうだったので
備忘録。文字をアニメーションし
ながら少しずつ表示させていく様
なエフェクトを実装できるjQuery
プラグイン・Lettering Animate
です。
プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。
Lettering Animate
lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。
以下動作サンプルです。
コード
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="jquery.lettering.js"></script><script type="text/javascript" src="jquery.lettering.animate.js"></script> |
本体とlettering.jsとプラグインを読み込む。
$("#foo").lettering().animateLetters({opacity:0},{opacity:1},{randomOrder:false,time:500,reset:true}); |
エフェクトは上記のように設定します。
他のエフェクトの設定法も書いてありますのでデモページでご参照ください。
