[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX
Post on:2014年7月17日
sponsors
テキストにちょっと面白いさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。
実装は非常に簡単で、一部のアニメーションは日本語にも対応しています。
LetterFXのデモ
デモは英語のテキストにさまざまなアニメーションを適用しています。
単語ごとに適用など、英語固有のものでなければ日本語でもアニメーションします。
Fall: 手前から落ちてくるようにテキストがアニメーションします。
Wave: テキストが波打つようにアニメーションします。
アニメーションは組み合わせて使うことも可能です。
Spin, Fade: テキストがフェードで表示されながら、くるくるっとアニメーションします。
Fly, Spin: テキストが彼方からくるくるっとアニメーションで表示されます。
アニメーションは他にもさまざまなものが用意されています。
LetterFXの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。
<head> ... <link href="jquery-letterfx.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src="http://code.jquery.com/jquery.min.js"></script> <script src="tuxsudo.min.js"></script> <script src="jquery-letterfx.js"></script> </body>
Step 2: HTML
アニメーションを適用するテキストはp要素などで実装し、classやidなどを付与しておきます。
<p class="tagline">てきすと</p>
Step 3: JavaScript
jQueryのセレクタでテキストを指定し、アニメーションの設定をしてスクリプトを実行します。
一番上で紹介したくるくる回るのは、こんな感じになります。
$(".tagline").letterfx({"fx":"swirl"});
アニメーションはさまざまなものが用意されており、オプションでもアニメーションのタイミング、エフェクトが完了した時の状態などが設定できます。
下記ページで実際の動作を確認しながら、さまざまな設定のスクリプトを簡単に書き出すことができます。
sponsors
