[JS]text-shadowをアニメーションでコントロールするスクリプト -animate-textshadow.js

サイト構築 -JavaScript

Post on:2011年6月7日

sponsorsr

テキストにシャドウをつけるtext-shadowをアニメーションでコントロールして、さまざま面白いエフェクトを生み出すjQueryのプラグインを紹介します。

Animated CSS text shadows with jQuery
デモページ

[ad#ad-2]

デモではさまざまなtext-shadowのアニメーションを楽しめます。
以下、デモを紹介しつつ、その実装方法もご紹介。

デモ：基本

一番シンプルな基本となるデモです。

HTML

HTMLはすべてのデモで、テキストをspan要素で実装するだけです。

<span id="basic">Click me</span>

CSS

text-shadowをアニメーションでコントロールするためには、最初にtext-shadowで値を持たせる必要があります。

.text {
	text-shadow: 3px 3px 3px #ccc;
}

デフォルト時のキャプチャ

JavaScript

「jquery.js」と当スクリプトを外部ファイルとし、下記のスクリプトを記述します。

.text {
$(document).ready(function() {
	$("#basic").click(function() { $(this).animate({textShadow: "#f0f 10px 10px 10px;"}); });
});

上記のスクリプトでは、click時にアニメーションで「#f0f 10px 10px 10px;」を適用するように指定してあります。

クリック時のキャプチャ

繊細なアニメーション

ホバー時にtext-shadowを使った繊細なアニメーションを適用します。

デフォルト時のキャプチャ

JavaScript

$("#subtle").hover(function() { 
	$(this).animate({textShadow: "#aaa 6px 6px 6px"});
}, function() { 
	$(this).animate({textShadow: "#ccc 3px 3px 3px"});
});

マウスホバー時のキャプチャ

グロウ

ホバー時にアニメーションでグロウを適用します。

デフォルト時のキャプチャ

JavaScript

$("#glow").hover(function() { 
	$(this).animate({textShadow: "#f00 0 0 15px"});
}, function() { 
	$(this).animate({textShadow: "#f00 0 0 0"});
});

マウスホバー時のキャプチャ

スロー

text-shadowのアニメーションをゆっくり適用します。

デフォルト時のキャプチャ

JavaScript

$("#slow").hover(function() { 
	$(this).animate({textShadow: "#000 -10px -10px 30px"}, 1000);
}, function() { 
	$(this).animate({textShadow: "#259 5px 5px 5px"}, 1000);
});

マウスホバー時のキャプチャ

くっきり

ぼんやりしたテキストをアニメーションで、くっきりさせます。

デフォルト時のキャプチャ

JavaScript

$("#blurry").hover(function() { 
	$(this).animate({textShadow: "#aaa 0 0 0"});
}, function() { 
	$(this).animate({textShadow: "#aaa 0 0 10px"});
});

マウスホバー時のキャプチャ

ボタンのようなテキスト

クリック時にボタンのような押すエフェクトをアニメーションで適用します。

デフォルト時のキャプチャ

JavaScript

$("#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); 
});