animate-textshadow:テキストに影やグローを付けてアニメーション表示するJs



テキストに影やグロー効果を付けてアニメーション表示します。

1.CSSの記述

<style type="text/css">
<!--
body{
	margin: 2em;
	font-family:'Century Gothic', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'MS Pゴシック', 'MS PGothic', sans-serif;
}
h1{
	font-size:22px;
	font-weight:bold;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
	text-align:left;
}
#glow,#slow, #subtle, #blurry, #button{
	font-size: 40px;
	font-weight:bold;
}
#subtle{
	text-shadow: #ccc 3px 3px 3px;
}
#glow{
	letter-spacing: 2px;
	text-shadow: #f00 0 0 0;
	color: #cc2c2c;
}
#slow{
	letter-spacing: 2px;
	text-shadow: #259 5px 5px 5px;
	color: #49b;
}
#blurry{
	letter-spacing: -3px;
	text-shadow: #aaa 0 0 10px;
	color: transparent;
}
#button{
	position: relative;
	cursor: pointer;
	color: #3a3;
	text-shadow: #141 5px 5px 0;
}
-->
</style>

2.読込むJsとJavaScriptの記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="jquery.animate-textshadow.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	$("#subtle").hover(function() { $(this).animate({textShadow: "#aaa 6px 6px 6px"}); }, function() { $(this).animate({textShadow: "#ccc 3px 3px 3px"}); });
	$("#glow").hover(function() { $(this).animate({textShadow: "#f00 0 0 15px"}); }, function() { $(this).animate({textShadow: "#f00 0 0 0"}); });
	$("#slow").hover(function() { $(this).animate({textShadow: "#000 -10px -10px 30px"}, 1000); }, function() { $(this).animate({textShadow: "#259 5px 5px 5px"}, 1000); });
	$("#blurry").hover(function() { $(this).animate({textShadow: "#aaa 0 0 0"}); }, function() { $(this).animate({textShadow: "#aaa 0 0 10px"}); });
	$("#button").mousedown(function() { $(this).animate({top: "3px", left: "3px", textShadow: "#141 2px 2px 0"}, 100); }).mouseup(function() { $(this).animate({top: 0, left: 0, textShadow: "#141 5px 5px 0"}, 100); });
});
</script>

3.HTMLの記述例

	<p><span id="subtle">影が動きます。</span></p>

	<p><span id="glow">文字がグローします。</span></p>

	<p><span id="slow">影が移動します。</span></p>

	<p><span id="blurry">文字がシャープになります。</span></p>

	<p><span id="button">クリック出来る文字風です。</span></p>

animate-textshadow:テキストに影やグローを付けてアニメーション表示するデモページ

ソース元:animate-textshadow.js – Animated CSS text shadows with jQuery | Alex Peattie

フォントの種類がイマイチだと、
格好が付かない気がします。