jquery.textanimation.jsを使って色々なテキストアニメーション表示する方法【テキスト映え】｜DAD UNION

jquery.textanimation.jsを使ってページ内のテキストに色々なアニメーション効果をつけて表示させる方法をご紹介します。
簡単にテキストを映えさせる演出が実装できます。

Contents

jquery.textanimation.jsを使って、ページ内のテキストに色々なアニメーション効果をつけて表示させる読み込むjsファイル
ページ内のテキストに色々なアニメーション効果をつけて表示させるCSSの記述
ページ内のテキストに色々なアニメーション効果をつけて表示させるHTMLの記述
jquery.textanimation.jsを使って、ページ内のテキストに色々なアニメーション効果をつけて表示させるJavaScript記述
textAnimation：テキストを色々なアニメーション表示するデモページ

jquery.textanimation.jsを使って、ページ内のテキストに色々なアニメーション効果をつけて表示させる読み込むjsファイル

※jquery.min.js、jquery.transit.min.js、jquery.textanimation.jsファイルを読み込みます。

<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>

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

※アニメーション効果をつけるテキスト（div.demo）のCSS指定です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
}
div.demo{
	font-size:30px;
	margin:30px; 
}
-->
</style>

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

※ページ内のテキスト（class=”demo”）に色々なパターンのアニメーション効果を「例：id=”demo_roll1″」で指定します。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>以下のテキストを色々なアニメーション効果をつけて表示します。</h1>

    <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>

</div><!--/idWrap-->

jquery.textanimation.jsを使って、ページ内のテキストに色々なアニメーション効果をつけて表示させるJavaScript記述

※ページ内のテキストに指定した「例：id=”demo_roll1″」に対して$(テキストのid).textAnimation({テキストアニメーションオプション})でテキストアニメーション効果を設定します。以下は10パターンのテキストアニメーション効果を用意しました。

<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>