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

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

サイトのキャプチャ

OKShadow

OKShadowのデモ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

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

デモのキャプチャ

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,
});

top of page

©2017 coliss