textAnimation：テキストを色々なアニメーション表示するjQuery

ページ内のテキストに色々なアニメーション効果をつけて表示させます。

1．ヘッダーの記述例

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.transit.min.js"></script>
<script type="text/javascript" src="jquery.textanimation.js"></script>

2．CSSの記述例

該当テキストのclassをCSSで指定します。
（調整してみて下さい）

<style type="text/css">
<!--
div.demo{
	font-size:30px;
	margin:30px; 
}
-->
</style>

3．HTMLの記述例

<div id="demo_roll1" class="demo">DAD UNION</div>


<div id="demo_roll2" class="demo">css</div>


<div id="demo_step1" class="demo">JavaScript</div>


<div id="demo_step2" class="demo">jQuery</div>


<div id="demo_high1" class="demo">PHP</div>


<div id="demo_high2" class="demo">DAD UNION</div>


<div id="demo_jump1" class="demo">css</div>


<div id="demo_jump2" class="demo">jQuery</div>


<div id="demo_puff1" class="demo">PHP</div>


<div id="demo_puff2" class="demo">WEBメディア</div>

4．HTML内（body終了タグ直前）のJavaScript記述例

<script type="text/javascript">
$(document.body).ready(function(){
    $("div#demo_roll1").textAnimation({
		mode: "roll"
	});
    $("div#demo_roll2").textAnimation({
		mode: "roll",
		minsize: 20,
		magnification: 30,
		fixed: "top",
		delay: 15,
		stuff: 1.5
	});
    $("div#demo_step1").textAnimation({
		mode: "step"
	});
	$("div#demo_step2").textAnimation({
	    mode:"step",
	    minsize:20,            //minimum font size[integer]
	    maxsize:60,            //maximum font size[integer]
	    upper:false,           //is upper step? [boolean]
	    fixed:"top",           //which fixed top or bottom ["top","bottom"]
	    stuff:2.2,             //font stuff quantity[float]
	    delay:200,             //delay for between charactors animation
	    interval:0,            //interval for between animation
	    duration:1000          //animation duration
	});
    $("div#demo_high1").textAnimation({
		mode: "highlight"
	});
    $("div#demo_high2").textAnimation({
		mode: "highlight",
		baseColor: "#111111",
		highlightColor: "#2FFF5F",
		delay: 35,
		interval: 0,
		duration: 100
	});    
	$("div#demo_jump1").textAnimation({
	    mode:"jump"
	});
	$("div#demo_jump2").textAnimation({
	    mode:"jump",         
	    altitude:10,              //jump altitude[integer] 
	    bound :false,             //bound animation[boolean]
        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]
	});
    $("div#demo_puff1").textAnimation({
        mode:"puff"
    });
    $("div#demo_puff2").textAnimation({
        mode:"puff",
        color:"#77FF6F",          //highlight puffing color
        percent:200,              //font scale percentage.[integer]     
        interval:1000,               //interval time for between animation[integer]
        duration:1000,             //animation duration time[integer]
        times : 5                 //how times puffing animation[integer]
    });
});
</script>

textAnimation：テキストを色々なアニメーション表示するデモ

ソース元：jQuery Text Animation – jQuery Plugins

目立たせたいテキストがある時、アニメーションによっては良いかもしれませんね。