MOA Textとは？

MOA Textは、Webページの文字にマウスカーソルをあてるとちょっとしたアニメーションをさせることができるjQueryのプラグインです。

たとえばこんな感じ。

この文字列にマウスカーソルを合わせてみてください。リンクも大丈夫。


使い方

この効果を加えたいWebページの先頭で、jQueryのサイトのjquery-1.3.2.min.jsおよび、moatextの開発サイトのjquery.moatext-min.jsを読み込んでください。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.moatext-min.js"></script>

そして、効果を加えたい文字列があるHTMLで次のようなclassを指定してください。 
<div class="moatext_lens">
この文字列にマウスカーソルを合わせてみてください。<a href="http://www.bitmeister.jp">リンク</a>も大丈夫。
</div>
このほかにもいろいろ使い方があるので、こちらの動作例やこちらのReadMe(インチキくさい英語ですが)を参照してください。

ちょっとお試し

動作確認済み環境


内部動作の説明

所定のclassやjQueryのセレクターによって指定された各要素について、まずそれぞれのテキスト（というか"< ... >"で囲まれていないすべての文字列）の一文字一文字をspanタグで囲います。
そして、それらの文字にパラメータで指定された様々なアニメーション効果を設定するような形にしています。
たとえば、<div class="moatext_lens">abc</div>の場合、"abc"を"<span>a</span><span>b</span><span>c</span>"のようにします。
*実際にはただのspanタグではなくclass名を指定したりしているのですが、詳しくはソースコードをご覧いただいた方がわかりやすいと思います。

それぞれの文字に対するアニメーション効果はmouseoverされたときにアニメーションの関数を呼び出す形にしています。

オープンソースです

オープンソース(MITライセンス)で開発しています。
こちらに開発プロジェクトのページがあります。あと、jQuery本家のプラグインにも登録してみました。
最新情報はこれらのサイトをチェックしてください。

注意事項

  • あまりたくさんの文字に効果をつけようとすると、とても動作が遅くなります。v0.3.2で改善しました。
  • 対象となる要素の子要素でscriptタグを使っている場合、そのスクリプトは正しく動かないことがあります。
  • IEのレンダリングモードがstandardのときは文字の透過がうまくできないため、暫定実装となっています。v0.3.2で修正しました。レンダリングモードについてはこちらやこちらを参照。

最後に

本ソフトは、もともと昨年(2008)のコラボさいたまの当社出展物からアイデアを得たものです。この場を借りて作者のjwatに謝意を表します。

2009/9/15追記

お好きなページをもあもあさせることができるように、こちらにブックマークレットを作りました。
同じブックマークレットをブログにも書きましたので、使い方などはそちらをご覧ください。