好きなゲームを挙げてみよう

ドラゴンクエスト3 そして伝説へ…

ドラゴンクエスト5 天空の花嫁

ファイナルファンタジー3

ファイナルファンタジー7

アークザラッド2

スターオーシャンセカンドストーリー

メタルマックス2

摩訶摩訶

タクティクスオウガ

ナイトガンダム物語大いなる遺産

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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.textAnimation.min.js"></script>
<script>
	$(window).load(function(){
		$('#TextAnimationDemo01').textAnimation({
			mode: 'roll'
		});
		$('#TextAnimationDemo02').textAnimation({
			mode: 'roll',
			minsize: 20,
			magnification: 30,
			fixed: 'top',
			delay: 15,
			stuff: 0.5
		});
		$('#TextAnimationDemo03').textAnimation({
			mode: 'highlight',
			baseColor: '#111111',
			highlightColor: '#2FFF5F',
			delay: 35,
			interval: 0,
			duration: 100
		});
		$('#TextAnimationDemo04').textAnimation({
			mode:'step',
			minsize:20,
			maxsize:60,
			upper:false,
			fixed:'top',
			stuff:0.9,
			delay:200,
			interval:0,
			duration:1000
		});
		$('#TextAnimationDemo05').textAnimation({
			mode: 'roll',
			minsize: 10,
			magnification: 10,
			fixed: 'left',
			delay: 15,
			stuff: 0.5
		});
		$('#TextAnimationDemo06').textAnimation({
			mode: 'step',
			stuff: 1.0
		});
		$('#TextAnimationDemo07').textAnimation({
			mode:'jump'
		});
		$('#TextAnimationDemo08').textAnimation({
			mode: 'step',
			stuff: 0.2
		});
		$('#TextAnimationDemo09').textAnimation({
			mode:'jump',
			altitude:20,
			bound :false,
			fixed:'bottom',
			delay:80,
			interval:0,
			duration:400
		});
		$('#TextAnimationDemo10').textAnimation({
			mode: 'highlight'
		});
	});
</script>

//オプション一覧
mode: "roll",
minsize: 20,
magnification: 30,
fixed: "top",
delay: 15,
stuff: 1.5



mode:"step",
minsize:20,            //minimum font size[integer]
maxsize:60,            //maximum font size[integer]
upper:false,           //is upper step? [boolean]
onStart:"mouseenter",  //event handler for start animation[Browse jQuery Events]
onFinish:"mouseleave", //event handler for finish animation[Browse jQuery Events]
fixed:"top",           //which fixed top or bottom ["top","bottom"]
stuff:2.2,             //font stuff quantity[float]
delay:200,             //delay time for animation between characters[integer] 
interval:0,            //interval time for between animation[integer]
duration:1000           //animation duration time[integer]
repeat:false           //repeat animation[boolean]


mode:"highlight",         
baseColor:"#111111",      //base font color 
highlightColor:"#2FFF5F", //highlight font color
onStart:"mouseenter",     //event handler for start animation[Browse jQuery Events]
onFinish:"mouseleave",    //event handler for finish animation[Browse jQuery Events]
delay:35,                 //delay time for animation between characters[integer] 
interval:0,               //interval time for between animation[integer]
duration:100              //animation duration time[integer]
repeat:false              //repeat animation[boolean]


mode:"jump",         
altitude:10,              //jump altitude[integer] 
bound :false,             //bound animation[boolean]
onStart:"mouseenter",     //event handler for start animation[Browse jQuery Events]
onFinish:"mouseleave",    //event handler for finish animation[Browse jQuery Events]
fixed:"bottom",           //which fixed top or bottom ["top","bottom"]
delay:80,                 //delay time for animation between characters[integer] 
interval:0,               //interval time for between animation[integer]
duration:400              //animation duration time[integer]
repeat:false              //repeat animation[boolean]
<p class="title">好きなゲームを挙げてみよう</p>
<p id="TextAnimationDemo01" class="TextAnimation-demo">ドラゴンクエスト3 そして伝説へ…</p>		
<p id="TextAnimationDemo02" class="TextAnimation-demo">ドラゴンクエスト5 天空の花嫁</p>
<p id="TextAnimationDemo03" class="TextAnimation-demo">ファイナルファンタジー3</p>
<p id="TextAnimationDemo04" class="TextAnimation-demo">ファイナルファンタジー7</p>
<p id="TextAnimationDemo05" class="TextAnimation-demo">アークザラッド2</p>
<p id="TextAnimationDemo06" class="TextAnimation-demo">スターオーシャンセカンドストーリー</p>
<p id="TextAnimationDemo07" class="TextAnimation-demo">メタルマックス2</p>
<p id="TextAnimationDemo08" class="TextAnimation-demo">摩訶摩訶</p>
<p id="TextAnimationDemo09" class="TextAnimation-demo">タクティクスオウガ</p>
<p id="TextAnimationDemo10" class="TextAnimation-demo">ナイトガンダム物語大いなる遺産</p>

TextAnimationについて

TextAnimationは、テキストを色々とアニメーションさせることができるプラグインです。
プラグイン本体とjquery.transitを読み込む必要があります。
modeのpuffは動かない??
単なるアニメーションではありません。踊りますし、カラフルになりますし、なんかすごいです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • jQSlickWrap

    jQSlickWrap

    画像のフチに沿って文字を配置してくれる

  • textillate

    textillate

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

  • SlidingLetters

    SlidingLetters

    SlidingLettersはマウスオーバーでアニメーションでテキスト切り替えできる

  • countUp

    countUp

    countUpは、細かいカスタマイズができるカウントアップ

  • animateNumber

    animateNumber

    カウントアップっぽい表示で指定した数字を表示してくれる