[JS]テキストにSci-Fi styleのかっこいいアニメーションのエフェクトを与えるスクリプト -Text Effects

ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。

Text Effects
Text Effects -GitHub

※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。

• Text Effectsのデモ
• Text Effectsの使い方

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]