[jQuery]簡単にテキストにエフェクトがかけられるjQueryプラグイン – Text Effects

Flash全盛期に(個人的に)よく見かけたあのかっこいいテキストエフェクトがjQueryのプラグインで簡単に実装できます！おしゃれなページの一工夫演出にいかがでしょうか？

Hello!! Welcome to STUDIO BENKEI!
It is a sample of a text effect!
This text effect can be mounted!

■デモサイト

Text Effects

■必要ファイル

まずはヘッダー内に外部ファイルとしてjQueryとtexteffectsを読み込みます。
そしてエフェクトをかけるテキストのクラス名などをjQueryのセレクタで指定します。

html

<script type="text/javascript" src="../0302/js/jquery.js"></script>
<script type="text/javascript" src="../0302/js/texteffects.min.js"></script>
<script type="text/javascript">
$(function() {
    $(".text-effect").textEffect()
});
</script>

あとはエフェクトをかけたいテキストをpタグなどで囲みクラス名をつければ完了です！

html

<p class="text-effect">
Digital Design Does Matter in Fourdesire
</p>

また、例えば3行のテキストを一行で順番に表示させる場合は下記のように記述します。

html

<ul class="text-effect-loop">
<li>Digital Design Does Matter in Fourdesire</li>
<li>DOIT: Design, Open, Innovation and Technology</li>
<li>We help organization build beauty and experience</li>
</ul>

そして下記のスクリプトを実行します。

html

$(".text-effect-loop").textEffectLoop()

いろいろとオプション指定もできるようです。

html

jQuery.textEffect({
fps: 20 //アニメーションスピード
repeat: 10 //ピート数
debug: false
reverse: false //リバースモードの有無
possibleChar: "ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^*()_+-=[];;>0123456789" //使用する文字列
})

※テキストエフェクトにリンクを設定すると、リンクが効きないような気がします…
それと数行のテキストを設定するときは、cssの影響？でテキストエフェクトが動いている間ぐらつくことがあります。
サンプルではheightで高さを指定して、overflow:hiddenを設定してあげることで解決しました。