jquery.textanimation.jsを使ってページ内のテキストに色々なアニメーション効果をつけて表示させる方法をご紹介します。
簡単にテキストを映えさせる演出が実装できます。
Contents
ディスプレイ広告
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>
textAnimation:テキストを色々なアニメーション表示するデモページ
textAnimation:テキストを色々なアニメーション表示するデモ
ソース元:jQuery Text Animation – jQuery Plugins
目立たせたいテキストがある時、アニメーションによっては良いかもしれませんね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。