テキストにちょっと面白いアニメーションを適用する -LetterFX1

簡単な実装で、テキストに面白いさまざまなアニメーションを適用できるjQueryのプラグインを紹介です。

公式サイト：LetterFX jQuery Plugin | TuxSudo Web Development
Git：LetterFX jQuery Plugin | TuxSudo Web Development

LetterFXの導入

ソース

Git：LetterFX jQuery Plugin | TuxSudo Web Development　ページのDownLoad Zipボタンでファイルをダウンロード＞解凍します。

CSSファイルとJavascriptファイルを読み込み

必要なCSSファイルとJavascriptファイルを読み込みます

<link href="jquery-letterfx.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="tuxsudo.min.js"></script>
<script src="jquery-letterfx.js"></script>

HTMLとJavascriptの実行

アニメーションを適用させたいテキストにclassかIDを指定し、それに対して、Javascriptを実行させます。

<p id="textEffect">てきすと</p>

<script type="text/javascript">
jQuery(function($){
    $("#textEffect").letterfx({"fx":"swirl"}); 
});
</script>

デモとエフェクトパターン

1-3のサンプルコードで以下の様なエフェクトが適用されます。

あいうえお

エフェクトパターンは、公式サイト（LetterFX jQuery Plugin | TuxSudo Web Development）からご確認ください。

カテゴリー： jQuery,