テキスト表示を印象的にする動きを付与!jQueryプラグイン「jQuery TextFX」

アクセス時にタイトルなどを動きをもたらせると目がいき印象的になります。
また本文にも注目をしてくれる可能性が高まります。
jQueryプラグインのjQuery TextFXを使用すると簡単に実現できます。

sponsors

使用方法

jQuery TextFXからファイル一式をダウンロード。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.transit.js"></script>
  <script type="text/javascript" src="jquery.textFx.js"></script>

    <script type="text/javascript">
$(document).ready(function() {
  $('.class名').textFx({
    type: 'slideIn', //動きfadeIn  slideIn  rotate  scale
    iChar: 20, //文字間の表示間隔
    iAnim: 20, //アニメーションの速度
    direction: 'top' //現れる方向slideのみ
  });
});
</script>
     
あとは動きを付けたいテキストにclassを振ってあげれば完成です。
<p class="class名">テキスト</p>

サンプル

回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る回る


Javascriptサンプルページ一覧
skuare.net

sponsors