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" >WEBエンジニアの隠れたファインプレー</div>
    <div id="demo_roll2" class="demo" >BLINDER HIDDEN</div>
    <div id="demo_step1" class="demo" >「BLINDER HIDDEN(ブラインダーヒドゥン)」は、</div>
    <div id="demo_step2" class="demo" >WEBエンジニアの隠れたファインプレーを</div>
    <div id="demo_high1" class="demo" >紹介するWEBサイトです。</div>
    <div id="demo_high2" class="demo" >発信情報は、JavaScript、jQuery、Ajax、</div>
    <div id="demo_jump1" class="demo" >PHP、Android、java、WordPress、Facebook、</div>
    <div id="demo_jump2" class="demo" >HTML5、HTML、CSS、CSS3、</div>
    <div id="demo_puff1" class="demo" >MySQL、Linux、コマンド、SEO、スマートフォン、</div>
    <div id="demo_puff2" class="demo" >見えないデザイン、アイデア 等</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

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