テキストに影やグロー（Glow）を付けてアニメーション表示【jquery.animate-textshadow.js】｜DAD UNION

jquery.animate-textshadow.jsを使ってテキストに影やグロー（Glow：光を表現するエフェクト）を付けてアニメーション表示する方法をご紹介します。

Contents

jquery.animate-textshadow.jsを使ってテキストに影やグロー（Glow）を付けてアニメーション表示するCSSの記述
jquery.animate-textshadow.jsを使ってテキストに影やグロー（Glow：光を表現するエフェクト）を付けてアニメーション表示するJavaScriptの記述
テキストに影やグロー（Glow）を付けてアニメーション表示するHTMLの記述例
animate-textshadow：テキストに影やグローを付けてアニメーション表示するデモページ
ソース元：animate-textshadow.js and CSS floating feedback button

jquery.animate-textshadow.jsを使ってテキストに影やグロー（Glow）を付けてアニメーション表示するCSSの記述

※影やグロー（Glow）を付けるテキストのCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin: 2em;
	font-family:'Century Gothic', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', '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>

jquery.animate-textshadow.jsを使ってテキストに影やグロー（Glow：光を表現するエフェクト）を付けてアニメーション表示するJavaScriptの記述

※jquery.min.js（v1.6.1）、jquery.animate-textshadow.min.jsファイルを読み込みます。$(テキストエリア).animate({textShadow: 影の色と範囲},表示速度)で設定します。

<script type="text/javascript" src="https://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>

テキストに影やグロー（Glow）を付けてアニメーション表示するHTMLの記述例

※5パターンのテキストに影やグロー（Glow）を用意しました。必要に応じて変更して下さい。

<div id="idWrap">
	<h1>テキストを影やグローを付けてその効果がアニメーションします。</h1>

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

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