SQLの窓

2013年02月17日


jQuery のスライダーで box-shadow の影分身の効果をリアルタイムに確認する

CSS3 の効果というのは、いきなり発動するのでどのような経緯でそうなっているかが解りにくいと思います。特に、この box-shadow では、本体から『影』をほぼ無制限に作成できるのですが、多ければ多いほど読みずらいものです。

JavaScript なら動かしながら・・・

JavaScript ならば、コードをコメントにしたり変更したりしながら、CSS の効果を確かめる事ができますし、実際どのようなバリエーションで変化するかを見る事ができるので、いろいろその他の結果も想像しやすくなると思います。

jsdo.it で実行

こんな画面で『スライダー』を使って変化を見る事ができます。



jQuery のスライダーを使っているので、以下のコード内では Google の API ホスティングと Google ドライブに置いた CSS を使っているのでレスポンスはあまり良く無いかもしれません。ですが、jsdo.it ならば、全てのライブラリをホスティングしてくれているので比較的安心して使えると思います。

numBox ファンクションが影分身部分

ここでスライダーで動かしたぶんの影分身を量産しています。box-shadow そのものの意味合いは、『CSS3 : box-shadow の影分身の解説』を参照して下さい。
<link rel="stylesheet" href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jqcss/black-tie/jquery-ui-1.8.20.custom.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<style type="text/css">
td {
    padding: 5px;
}

#slider1, #slider2, #slider3 {
	width: 200px;
	margin: 0 0 0 20px;
}
#target {
	margin: 0 0 0 60px;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	border: solid 5px #909090;
}
</style></head>
<body>
<table>
<tr>
<td style='width:50px;'>大きさ</td><td></td><td><div id="slider1"></div></td>
</tr><tr>
<td>数</td><td><input id="nn" size="1"></td><td><div id="slider2"></div></td>
</tr><tr>
<td>角度</td><td><input id="nn2" size="2"></td><td><div id="slider3"></div></td>
</tr>
</table>
<div id="target"></div>

<script type="javascript">
    $("#nn").val(num+1);
</script>

<script type="text/javascript">
var num = 0;
function numBox(val) {
	$("#target").css("width", val+"px");
	$("#target").css("height", val+"px");

	var sd = "";
	var cs1 = " 0px -5px rgba(255,255,255,1)";
	var cs2 = " 0px 0px rgba(144,144,144,1)";
	for( var j = 0; j < num; j++ ) {
		for( var i = 0; i < num; i++ ) {
			if ( j != 0 || i != 0 ) {
				sd += ",";
			}
			sd += (val+10)*(i+1)+"px "+(val+10)*(j)+"px"+cs1;
			sd += ","+(val+10)*(i+1)+"px "+(val+10)*(j)+"px"+cs2;
			if ( j != 0 ) {
				sd += ","+(val+10)*(i)+"px "+(val+10)*(j)+"px"+cs1;
				sd += ","+(val+10)*(i)+"px "+(val+10)*(j)+"px"+cs2;
			}
		}
	}
	$("#target").css("box-shadow", sd);
}

// *************************************
// 大きさ変更
// *************************************
$(function () {
	$("#slider1").slider({
		range: "min",
		step: 1,
		min: 20,
		max: 100,
		value: 20,
		slide: function (event, ui) {
			numBox(ui.value);
		}
	});
});
// *************************************
// 数の変更
// *************************************
$(function () {
	$("#slider2").slider({
		range: "min",
		step: 1,
		min: 0,
		max: 20,
		value: 0,
		slide: function (event, ui) {
			num = ui.value;
			$("#nn").val(ui.value+1);
			numBox(($( "#slider1" ).slider( "value" ))+0);
		}
	});
});

// *************************************
// 角度変更
// *************************************
$(function () {
	$("#slider3").slider({
		range: "min",
		step: 1,
		min: -80,
		max: 80,
		value: 0,
		slide: function (event, ui) {
			$("#nn2").val(ui.value);

			$("#target").css("-moz-transform", "skew("+ui.value+"deg)");
			$("#target").css("-webkit-transform", "skew("+ui.value+"deg)");
			$("#target").css("-o-transform", "skew("+ui.value+"deg)");
			$("#target").css("-ms-transform", "skew("+ui.value+"deg)");
		}
	});
});


</script>
余談ですが、jQuery の css メソッドで css を適用すると、クロスブラウジングしやすいです。CSS の記述だったらおそらく煩雑になってかつ後々のメンテナンスに差が出ると思います。

JavaScript のほうが使えるのならいいと思うのですが・・・



posted by lightbox at 2013-02-17 10:00 | jQuery UI | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり