カテゴリー:
JavaScript
タグ:
 jQuery JavaScript

このエントリーをはてなブックマークに追加
更新日時:
2013年01月18日(金)
作成日時:
2013年01月18日(金)

前の記事 / 次の記事

文字列を俺が頑張らないでアニメーションさせるにはどうしたらいいか調べた記録。

Lettering.jsjquery-lettering-animate という
jQueryプラグインを使えばアニメーション出来ることが分かった。

まず、Lettering.js
これは文字列を分解して根こそぎspanタグ&クラスを付けてくれるプラグイン

// haml
:javascript
  $(document).ready(function() { $(".message").lettering(); });

%p.message
  頃は二月十八日の酉の刻ばかりのことなるに

ってすると

<p class="message">
  <span="char1">頃</span>
  <span="char1">は</span>
  <span="char2">二</span>
  <span="char3">月</span>
  <span="char4">十</span>
  <span="char5">八</span>
  <span="char6">日</span>
</p>

みたいになる(実際には改行は入らない)。

次に、jquery-lettering-animate で、Lettering.js によって分解された文字列をアニメーションさせる。

$("#title01").lettering().animateLetters(
  {opacity:0}, null,
  {randomOrder:false, time:500, reset:true}
);

みたいに書く。
サンプルはこのサイトにプラグインをインストールしてないからない。

詳細は次のページを参照
github-lettering-animate

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