[JS]使い方はいろいろ、アニメーションで追随するドロップシャドウを生成するスクリプト -OKShadow

ユーザーのマウス操作に合わせて、アニメーションで追随するドロップシャドウを生成するjQueryのプラグインを紹介します。

OKShadow

[ad#ad-2]

• OKShadowのデモ
• OKShadowの実装

OKShadowのデモ

まずは、OKShadowの動作がよく分かるシンプルなデモからご紹介。

div要素で配置したボックスのデモ
マウスカーソルの位置と対称的にドロップシャドウがアニメーションで表示・移動します。

テキスト要素のデモ
テキストにもドロップシャドウを適用できます。

ブラー効果を与えたテキストのデモ
カーソルが近付くにつれ、くっきりします。

[ad#ad-2]

ドロップシャドウを使って、さらに面白い効果を引き起こすこともできます。

Landscape

Pyramid

Squares

Lines

Dots

Neon

OKShadowの実装

デモを例に、実装方法を紹介します。

div要素で配置したボックス

HTML

jQueryのセレクタで指定できるようにidを付与したdiv要素です。

<div id="example1"></div>

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js'></script>
<script src='okshadow.js'></script>

JavaScript

OKShadowのデフォルトの記述例です。

$(function(){
	$('#example1').okshadow();
});

スクリプトのオプション

オプションではドロップシャドウのカラー、位置などを設定できます。
オプションを使用して二つ目のデモは、下記のようになります。

$('#example2').okshadow({
	color: '#555',
	textShadow: true,
	xMax: 5,
	yMax: 0,
	yOffset: 3,
	fuzzMin: 1,
	fuzzMax: 3,
});