jQueryプラグインjquery.shadowtext.jsを使って、マウスにあわせて変化するテキストシャドーの実装です。マウスの動きにあわせて、マウスポインターに光源があるかのようにテキストのシャドーが変化します。オリジナルのデモでは、9つの効果が紹介されていますが、ここでの掲載は効果の分かりやすい6つだけにしています。また、パラメーターは日本語表示のために少し変更しています。

左側のテキストリンクをクリックすると、カルーセルで各タイプのサンプルと使用しているscriptのソースを表示します。

Default

$('.demo-default').shadowtext();
デフォルト
マウスにあわせて変化

Background

$('.demo-background').shadowtext({
	color:			"#800",
	distance: 		100,
	blurFar:		100,
	opacityFar:		0,
	framerate:		25,
	mouseRange:		1000
});
文字白抜き
背景色との明度差で表示

Focus

$('.demo-focus').shadowtext({
	color:			'black',
	distance: 		0,
	blurFar:		100,
	hideText:		true,
	mouseRange:		400
});
文字にフォーカスすると明確に

Axis

$('.demo-axis').shadowtext({
	color:		'#a00',
	distance:	20,
	blurFar:	20,
	axis:		'y',
	mouseRange:	35
});
回転軸・Y軸(上下)方向のみ

Webfont

$('.demo-webfont').shadowtext({
	blurFar:	20,
	distance:	20
});
Webフォント "Monoton"

Short range

$('.demo-short-range').shadowtext({
	color:			'#030',
	distance:		50,
	blurClose:		2,
	blurFar:		50,
	opacityClose:	1,
	opacityFar:		0,
	mouseRange:		100,
	axis:			'x'
});
短い広がり(光源が近い)・X軸のみ
Short range

 

 

 

※参照元:http://www.jqueryscript.net/text/jQuery-Plugin-For-Animated-Text-Shadows-with-Mouse-Interaction-shadowtext.html
戻るボタン