text-shadowをアニメーションさせるJavaScript「animate-textshadow.js」

海外では画像を使わずシステムフォントで見せるサイトが増えています。
jQueryを使用したanimate-textshadow.jsも、システムフォントでの表現を豊かにするプラグインの一つです。
※CSS3のためIE8以下は対象外
text-shadowをアニメーションさせるJavaScript「animate-textshadow.js」サンプル

使用方法
animate-textshadow.js - Animated CSS text shadows with jQueryからファイル一式をダウンロード。
また表現を加えたいテキストが下記のようにあったとします。
<p id="id名">テキスト</p>
CSSを以下のように記述します。
#id名 { text-shadow: #f00 0 0 0;}
※#f00のシャドーが0pxでかかっている状態。
これに対し、以下のような記述をすることでマウスオーバーの時にボワッとさせられます。
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.animate-textshadow.js"></script>
<script>
$(document).ready(function(){
$("#id名").hover(function() {
$(this).animate({textShadow: "#f00 0 0 15px"});
}, function() {
$(this).animate({textShadow: "#f00 0 0 0"});
});
});
</script>

シンプルですが、使い方次第で面白くなりそうです。
【CSS3参考】
text-shadow CSS テキスト
[CSS]text-shadowでここまでできる、かっこいいエフェクト集 | コリス

text-shadowをアニメーションさせるJavaScript「animate-textshadow.js」サンプル

sponsors

「text-shadowをアニメーションさせるJavaScript「animate-textshadow.js」」をシェアする

記事作成:
記事URL:

TOP > > > text-shadowをアニメーションさせるJavaScript「animate-textshadow.js」