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

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

See the Pen LetterFx – demo by ponzu (@ponzu) on CodePen.


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

See the Pen txt.wav – demo by ponzu (@ponzu) on CodePen.


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

See the Pen Arctext.js – demo by ponzu (@ponzu) on CodePen.


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
});