[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX

テキストにちょっと面白いさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。

実装は非常に簡単で、一部のアニメーションは日本語にも対応しています。

デモのアニメーション

LetterFX
LetterFX -GitHub

LetterFXのデモ

デモは英語のテキストにさまざまなアニメーションを適用しています。
単語ごとに適用など、英語固有のものでなければ日本語でもアニメーションします。

デモのアニメーション

Fall: 手前から落ちてくるようにテキストがアニメーションします。

デモのアニメーション

Wave: テキストが波打つようにアニメーションします。

アニメーションは組み合わせて使うことも可能です。

デモのアニメーション

Spin, Fade: テキストがフェードで表示されながら、くるくるっとアニメーションします。

デモのアニメーション

Fly, Spin: テキストが彼方からくるくるっとアニメーションで表示されます。

アニメーションは他にもさまざまなものが用意されています。

サイトのキャプチャ

Effect -LetterFx

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

top of page

©2024 coliss