【jQuery】css3のtext-shadowでアニメーションできちゃうプラグイン
css3のtext-shadowをアニメーションできちゃうプラグインを見つけた。
animate-textshadow.js – Animated CSS text shadows with jQuery
実装も簡単で面白そうなので試してみた。
あ、もちろんCSS3未対応ブラウザ(特にIE)に関しては、めんどいので完全無視の方向で。
とりあえず上記のサイトから「jquery.animate-textshadow.js」をdownloadしてhead内に下記を追加。
<script type='text/javascript' src='[任意のパス] /jquery-1.6.1.min.js'></script> <script type="text/javascript" src="[任意のパス] /jquery.animate-textshadow.js"></script>
■基本となるhtml
<p class="textType0*"><span id="***">hogehoge</span></p>
■基本となるcss
.textType01{
cursor:pointer;
text-shadow: 3px 3px 3px #ccc;
font-weight:bold;
font-size:150%;
}
.textType02{
cursor:pointer;
text-shadow: 5px 5px 0 #141;
font-weight:bold;
font-size:150%;
}

デスラッシュ!