365日の
言葉を持たぬラブレター
とりとめなく ただ君を書き連ねる
明かりを灯し続けよう
心の中のキャンドルに
フーっと風が吹いても消えたりしないように

  • 強…
  • 速…
  • 避…
  • 無理!
  • 受け止める
  • 無事で!?
  • 出来る!?
  • 昭吾へ
  • 人の生きかたにはいろいろある。
  • お前も大きくなった。
  • 自分の道をすすむのもいい。
  • だが小さいころ運同会で二人三きゃくで歩ったろ。
  • あのときのことがおとうさんにはわすれられないのだよ。
  • 昭吾、人生は一人じゃない。
  • 二人三きゃくで歩らねばならんこともある。

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/okshadow.min.js"></script>
<script>
	$(window).load(function(){
		$('#OKShadowDemo01 div').okshadow();
		$('#OKShadowDemo02 p').okshadow({
			color: '#666',
			textShadow: true,
			xMax: 5,
			yMax: 5,
			yOffset: 2,
			fuzzMin: 1,
			fuzzMax: 3,
		});
		$('#OKShadowDemo03 li').okshadow({
			color: '#658193',
			textShadow: true,
			transparent: true,
			xMax: 0,
			yMax: 0,
			fuzzMin: 1.5,
			fuzz: 30
		});
		$('#OKShadowDemo04 li').okshadow({
			color: '#8c0000',
			textShadow: true,
			transparent: true,
			xMax: 0,
			yMax: 0,
			fuzzMin: 1.5,
			fuzz: 20
		});
	});
</script>
<div id="OKShadowDemo01" class="OKShadow-demo">
	<div></div>
</div>
<div id="OKShadowDemo02" class="OKShadow-demo">
	<p>365日の<br />
		言葉を持たぬラブレター<br />
		とりとめなく ただ君を書き連ねる<br />
		明かりを灯し続けよう<br />
		心の中のキャンドルに<br />
		フーっと風が吹いても消えたりしないように</p>
</div>

<div id="OKShadowDemo03" class="OKShadow-demo">
	<ul>
		<li>強…</li>
		<li>速…</li>
		<li>避…</li>
		<li>無理!</li>
		<li>受け止める</li>
		<li>無事で!?</li>
		<li>出来る!?</li>
		<li>否</li>
		<li>死</li>
	</ul>
</div>

<div id="OKShadowDemo04" class="OKShadow-demo">
	<ul>
		<li>昭吾へ</li>
		<li>人の生きかたにはいろいろある。</li>
		<li>お前も大きくなった。</li>
		<li>自分の道をすすむのもいい。</li>
		<li>だが小さいころ運同会で二人三きゃくで歩ったろ。</li>
		<li>あのときのことがおとうさんにはわすれられないのだよ。</li>
		<li>昭吾、人生は一人じゃない。</li>
		<li>二人三きゃくで歩らねばならんこともある。</li>
	</ul>
</div>

OKShadowについて

OKShadowは、マウス位置にあわせて、ページ内の要素のshadowが連動するプラグインです。
なかなか使い道を見つけづらいプラグインですけど、工夫次第ではおもしろい感じになるかもしれませんね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • PercentageLoader

    PercentageLoader

    とてもきれいにロード内容をパーセント表示してくれる

  • champagne

    champagne

    指定要素内の要素をランダムにフェードインしながら表示

  • lodaButton

    lodaButton

    lodaButtonは、アニメーションアイコン付きのボタンを設置できる

  • RealShadow

    RealShadow

    RealShadowは、マウスの動きに追随するシャドウを簡単に設置できる

  • ResizeEnd

    ResizeEnd

    ResizeEndは、ウィンドウサイズを変更後のイベント設定できる