テキストにエフェクトがつけられるプラグインまとめ

エフェクト付きでテキストを表示する LetterFx

LetterFxは様々なエフェクト付きでテキストが表示できるjQueryプラグインです。
オプションもオプションも豊富で派手なものからシンプルなものまで設定できるので、サイトのコピーなんかを印象づけるのに使えますね。

LetterFix

必要なファイルを読み込む

LetterFixからデータをダウンロードして、jQuery本体と以下のファイルを読み込みます。

<link rel="stylesheet" href="jquery-letterfx.min.css" />
<script src="jquery.min.js"></script>
<script src="tuxsudo.min.js"></script>
<script src="jquery-letterfx.min.js"></script>

html

エフェクトをつけたいテキストに任意のクラス名を付与します。

<p class="spin">テキストがspinします</p>

jQuery

2行目でエフェクトをつけたいテキストに付与したクラス名を指定します。
3行目はエフェクトの種類です。

$(function() {
  $(".spin").letterfx({
    "fx": "spin"
  });
});

テキストのCSSアニメーションを繰り返す txt.wav

txt.wavはCSSアニメーションでテキストをゆらゆら動かすことのできるjavascriptプラグインです。
前述のLetterFxと違うところは、LetterFxはエフェクトが画面がロードされた時に1回起こるのに対し、txt.wavはアニメーションを繰り返してテキストが動き続ける点です。

txt.wav

必要なファイルを読み込む

txt.wavの配布元からファイルをダウンロード、またはCDNのurlから読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/txt.wav/1.0.5/css/txt.wav.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/txt.wav/1.0.5/js/txt.wav.min.js"></script>

html

アニメーションをつけたいテキストにクラス名txtwavと、アニメーションの種類の指定として
slow,vibe,flip,bounceいずれかのクラス名を指定します。

<p class="txtwav slow">
  slow：テキストがゆっくり揺れます
</p>
<p class="txtwav vibe">
  vibe：テキストが揺れます
</p>
<p class="txtwav flip">
  flip：テキストが落ちたり回ったりします
</p>
<p class="txtwav bounce">
  bounce：テキストが弾みます
</p>

テキストをカーブさせる Arctext.js

Arctext.jsはテキストをカーブさせて表示することが出来るjQueryプラグインです。
わざわざ画像を作らなくてもいいので、汎用性のあるデザインに出来ます。

Arctext.js

必要なファイルを読み込む

jQueryライブラリ本体と、Arctext.js 配布元からダウンロードしたプラグインファイルを読み込みます。

<script src="jquery.min.js"></script>
<script src="jquery.arctext.js"></script>

html

カーブさせたいテキストに任意のクラス名を付与します。

<p class="example1">テキストがカーブします</p>
<p class="example2">テキストが下へ向かってカーブします</p>
<p class="example3">テキストを回転させずにカーブします</p>

jQuery

htmlで指定したクラス名に対し、カーブの角度、向き、テキストの回転の有無を指定します。

//テキストがカーブします
$('.example1').arctext({
  radius: 200
});

//テキストが下へ向かってカーブ
$('.example2').arctext({
  radius: 300,
  dir: -1
});

//テキストを回転させずにカーブ
$('.example3').arctext({
  radius: 300,
  rotate: false
});