type “box”

type “text”, style “flat”

A

B

C

D

E

type “drop”, inset(真ん中) inverse(右)

type “text”

HELLO WORLD

A B C D E F G H I J K L

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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/realshadow-min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style>
	#RealShadow .title {
		margin: 80px 0 20px;
		color: #8c0000;
		font-weight: bold;
		text-align: center;
	}
	.RealShadow-demo {
		margin-bottom: 50px;
		text-align: center;
	}
	#RealShadowDemo01 p,
	#RealShadowDemo02 p {
		display: inline-block;
		width: 50px;
		height: 50px;
		margin: 0 20px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
	}
	#RealShadowDemo02 p {
		overflow: hidden;
		line-height: 50px;
		text-align: center;
	}
	#RealShadowDemo02 p:nth-of-type(1) { background-color: rgb(100, 100, 0); }
	#RealShadowDemo02 p:nth-of-type(2) { background-color: rgb(150, 100, 50); }
	#RealShadowDemo02 p:nth-of-type(3) { background-color: rgb(30, 200, 100); }
	#RealShadowDemo02 p:nth-of-type(4) { background-color: rgb(20, 50, 70); }
	#RealShadowDemo02 p:nth-of-type(5) { background-color: rgb(220, 80, 150); }
	#RealShadowDemo02 p span {
		font-size: 30px;
		font-weight: bold;
		color: #fff;
	}
	#RealShadowDemo03 p {
		display: inline-block;
		width: 100px;
		height: 100px;
		margin: 0 20px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
	}
	#RealShadowDemo04 p {
		margin-bottom: 50px;
	}
	#RealShadowDemo04 p:first-child {
		font-family: 'Oswald', sans-serif;
		font-size: 40px;
		font-weight: bold;
		color: #8c0000;
	}
	#RealShadowDemo04 p:nth-of-type(2) {
		font-family: 'Pacifico', cursive;
		font-size: 50px;
		font-weight: bold;
		color: #3c948b;
	}
</style>

<script>
    $(window).load(function(){
		for(var i=0; i<5; i++) {
			var _color = getColor();
			$($('#RealShadowDemo01 p').get(i)).css('background-color', 'rgb(' + _color + ')').realshadow({
				color: _color
			});
		}

		var _colorArr = ['70, 70, 0', '120, 70, 20', '0, 170, 70', '0, 20, 40', '190, 50, 120'];
		for(var i=0; i<5; i++) {
			$($('#RealShadowDemo02 p span').get(i)).realshadow({
				type: 'text',
				style: 'flat',
				length: 40,
				color: _colorArr[i]
			});
		}

		$('#RealShadowDemo02 p span').realshadow({
			type: 'text',
			style: 'flat',
			length: 40
		});
		$('#RealShadowDemo03 p:nth-of-type(1)').realshadow();
		$('#RealShadowDemo03 p:nth-of-type(2)').realshadow({
			inset: true
		});
		$('#RealShadowDemo03 p:nth-of-type(3)').realshadow({
			inverse: true
		});
		$('#RealShadowDemo04 p:nth-of-type(1)').realshadow({
			type: 'text',
			opacity: .2,
			length: 3
		});
		$('#RealShadowDemo04 p:nth-of-type(2)').realshadow({
			type: 'text',
			length: 10
		});
		function getColor() {
			var _r = Math.floor(Math.random() * 255);
			var _g = Math.floor(Math.random() * 255);
			var _b = Math.floor(Math.random() * 255);
			return _r + ',' + _g + ',' + _b;
		}
    });
</script>
<p class="title">type "box"</p>
<div id="RealShadowDemo01" class="RealShadow-demo">
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</div>

<p class="title">type "text", style "flat"</p>
<div id="RealShadowDemo02" class="RealShadow-demo">
	<p><span>A</span></p>
	<p><span>B</span></p>
	<p><span>C</span></p>
	<p><span>D</span></p>
	<p><span>E</span></p>
</div>

<p class="title">type "drop", inset(真ん中) inverse(右)</p>
<div id="RealShadowDemo03" class="RealShadow-demo">
	<p></p>
	<p></p>
	<p></p>
</div>

<p class="title">type "text"</p>
<div id="RealShadowDemo04" class="RealShadow-demo">
	<p>HELLO WORLD</p>
	<p>A B C D E F G H I J K L</p>
</div>

RealShadowについて

RealShadowは、マウスの動きに追随するシャドウを簡単に設置できるプラグインです。 シャドウのパターンも色々あるので、アイデア次第では面白いこととかに使えそうです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • glassyWorms

    glassyWorms

    背景にミミズをはわせる

  • FaviconNotifier

    FaviconNotifier

    ファビコンに数字を表示したり、変えたりすることができる

  • champagne

    champagne

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

  • lodaButton

    lodaButton

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

  • Toolbar

    Toolbar

    コンパクトなツールバーを設置できる