jQueryプラグインjquery.shadowtext.jsを使って、マウスにあわせて変化するテキストシャドーの実装です。マウスの動きにあわせて、マウスポインターに光源があるかのようにテキストのシャドーが変化します。オリジナルのデモでは、9つの効果が紹介されていますが、ここでの掲載は効果の分かりやすい6つだけにしています。また、パラメーターは日本語表示のために少し変更しています。
左側のテキストリンクをクリックすると、カルーセルで各タイプのサンプルと使用しているscriptのソースを表示します。
$('.demo-default').shadowtext();
$('.demo-background').shadowtext({
color: "#800",
distance: 100,
blurFar: 100,
opacityFar: 0,
framerate: 25,
mouseRange: 1000
});
$('.demo-focus').shadowtext({
color: 'black',
distance: 0,
blurFar: 100,
hideText: true,
mouseRange: 400
});
$('.demo-axis').shadowtext({
color: '#a00',
distance: 20,
blurFar: 20,
axis: 'y',
mouseRange: 35
});
$('.demo-webfont').shadowtext({
blurFar: 20,
distance: 20
});
$('.demo-short-range').shadowtext({
color: '#030',
distance: 50,
blurClose: 2,
blurFar: 50,
opacityClose: 1,
opacityFar: 0,
mouseRange: 100,
axis: 'x'
});
