ページ内のテキストに色々なアニメーション効果をつけて表示させます。
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
目立たせたいテキストがある時、アニメーションによっては良いかもしれませんね。