[JS]テキストにSci-Fi styleのかっこいいアニメーションのエフェクトを与えるスクリプト -Text Effects
Post on:2013年7月25日
ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。

Text Effects
Text Effects -GitHub
※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。
Text Effectsのデモ
テキストのエフェクトにはいくつかのバリエーションがあります。


上記のアニメーションgifのようなシンプルなエフェクトをはじめ、複数のテキストを使ってループで表示したり、逆からテキストを生成するリバースなどがあります。
Text Effectsの使い方
使い方は非常に簡単です。
Step 1: 外部ファイル
jquery.jsと当スクリプトを外部ファイルとして記述します。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/texteffects.min.js"></script>
Step 2: HTML
テキストはp要素などで実装します。
<p class="text-effect"> Digital Design Does Matter in Fourdesire </p>
Step 3: JavaScript
テキストをjQueryのセレクタで指定し、スクリプトを実行します。
<script type="text/javascript"> $(function() { $(".text-effect").textEffect() }); </script>
オプション
オプションでは、アニメーションのスピード、リピート数、リバースモードの有無、使用する文字列などを設定できます。
jQuery.textEffect({
fps: 20
repeat: 10
debug: false
reverse: false
possibleChar: "ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+-=[];;><0123456789"
})
[/javascript]
sponsors