下の ボタンを クリック すると ここの テキストが アニメーション するよ~

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery-letterfx.min.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery-letterfx.min.js"></script>
<script>
    $(window).load(function(){
		var demo_configs=
			[
				{config:{ fx:'fall', words:true, timing:200, onElementComplete: LetterFxBtnEnable}},
				{config:{ fx:'swirl', onElementComplete: LetterFxBtnEnable}},
				{config:{ fx:'grow', onElementComplete: LetterFxBtnEnable}},
				{config:{ fx:'wave', letter_end:'rewind', fx_duration:"400ms", onElementComplete: LetterFxBtnEnable}},
				{config:{ fx:'smear', letter_end:'rewind', onElementComplete: LetterFxBtnEnable}},
				{config:{ fx:'spin fade', onElementComplete: LetterFxBtnEnable}},
				{config:{ fx:'fly-right fly-bottom spin', onElementComplete: LetterFxBtnEnable}},
				{config:{ fx:'fly-right fly-bottom spin', backwards:true, letter_end:'stay', onElementComplete: LetterFxBtnEnable}}
			];
		$('#LetterFx .LetterFx-btn').on('click', function(){
			var _num = $(this).attr('data-letterfx');
			$('#LetterFxDemo').letterfx(demo_configs[_num].config);
			$('#LetterFx button').prop('disabled', true);
		});
		function LetterFxBtnEnable() {
			$('#LetterFx button').prop('disabled', false);
		}
    });
</script>
<p id="LetterFxDemo">下の ボタンを クリック すると ここの テキストが アニメーション するよ~</p>

<button class="LetterFx-btn red" data-letterfx="0">1</button>
<button class="LetterFx-btn red" data-letterfx="1">2</button>
<button class="LetterFx-btn red" data-letterfx="2">3</button>
<button class="LetterFx-btn red" data-letterfx="3">4</button>
<button class="LetterFx-btn red" data-letterfx="4">5</button>
<button class="LetterFx-btn red" data-letterfx="5">6</button>
<button class="LetterFx-btn red" data-letterfx="6">7</button>
<button class="LetterFx-btn red" data-letterfx="7">8</button>

LetterFxについて

LetterFxは、複数パターンでテキストアニメーションをセットできるプラグインです。 パターンが豊富で、細かいカスタマイズも可能なので、色々試して下さい。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • textillate

    textillate

    textillateは、様々なテキストアニメーションが表現できる

  • Airport

    Airport

    空港の発着情報ボードチックなテキスト表現ができる

  • fontSizer

    fontSizer

    ページ内の文字サイズを変更する事ができる

  • TextAnimation

    TextAnimation

    テキストを色々とアニメーションさせることができる

  • ShuffleLetter

    ShuffleLetter

    文字をシャッフルしながら表示することができる