• かちびと.net

    アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animateのご紹介。キャッチコピーなんかに使えるかもしれないですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate

スポンサーリンク

使いどころもありそうだったので
備忘録。文字をアニメーションし
ながら少しずつ表示させていく様
なエフェクトを実装できるjQuery
プラグイン・Lettering Animate
です。

プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。

Lettering Animate


lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。

以下動作サンプルです。

Sample

コード

<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
});

エフェクトは上記のように設定します。

他のエフェクトの設定法も書いてありますのでデモページでご参照ください。

Lettering Animate

URL :
TRB :

Ads

Posts

Contact

Services