CSS3 と jQuery で和時計

Category : CSS, jQuery

すいません、タイトルはちょっと嘘です。
和時計は日の出・日の入を利用した不定時法なのですが、これは見た目が和時計風になるだけです。
午前0時が子の刻、午前2時が丑の刻という感じです。

マークアップには ol を使っています。
それと、これは遊びで作ったものなので実際に使うのはやめておいたほうがいいと思います。

とりあえず完成品のデモをどうぞ。

CSS3 と jQuery で和時計 DEMO

デモファイルをダウンロード

最初に作ったもの

jsdo.it で書いたもの。webkit 専用。
見た目の指定のみなので動きません。

CSS3 で和時計 – jsdo.it – share JavaScript, HTML5 and CSS

作り直して動くようにしたもの

HTML

HTML 部分は単純です。

<div id="wadokei">
	<ol>
		<li id="ne"><span>子</span></li>
		<li id="ushi"><span>丑</span></li>
		<li id="tora"><span>寅</span></li>
		<li id="u"><span>卯</span></li>
		<li id="tatsu"><span>辰</span></li>
		<li id="mi"><span>巳</span></li>
		<li id="uma"><span>午</span></li>
		<li id="hitsuji"><span>未</span></li>
		<li id="saru"><span>申</span></li>
		<li id="tori"><span>酉</span></li>
		<li id="inu"><span>戌</span></li>
		<li id="i"><span>亥</span></li>
	</ol>
</div>

CSS

Firefox, Chrome, Safari, Opera に対応するために、それぞれの指定を追加していきます。


/* 時計の外枠のボーダーと外枠の色 */
#wadokei {
	position: relative; /* :before :after の absolute 用 */
	margin: 0 auto;
	padding: 5px;
	border: 1px solid #666;
	border-radius: 166px;
	-moz-border-radius: 166px;
	-webkit-border-radius: 166px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	width: 322px;
	height: 322px;
	background-color: #222;
	font-family: serif;
}

/* 時計の針 */
#wadokei:before {
	display: block;
	position: absolute;
	top: 50px;
	left: 165px; /* 中心にくるように #wadokei の width を考えながら調整する */
	z-index: 1; /* ないとみえなくなる */
	width: 2px;
	height: 111px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	background: #000;
	content: "";
}

/* 時計の針の根元 :before とほとんど同じ */
#wadokei:after {
	display: block;
	position: absolute;
	top: 161px;
	left: 161px;
	z-index: 2;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	width: 10px;
	height: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	background: #c00;
	content: "";
}

/* 時計の内側 */
#wadokei ol {
	position: relative; /* li が absolute になるので */
	margin: 0;
	padding: 0;
	border: 1px solid #999;
	border-radius: 160px;
	-moz-border-radius: 160px;
	-webkit-border-radius: 160px;
	list-style: none;
	width: 320px;
	height: 320px;
	background-color: #fff;
	background-image: -webkit-gradient(radial, center center, 20, center center, 150, from(#fff), color-stop(95%, #eaeaea), to(#e0e0e0));
}

/* 文字盤 */
#wadokei ol > li {
	position: absolute; /* リストを全部同じ場所に */
	top: 150px;
	left: 10px;
	width: 150px;
	font-size: 20px;
	transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	-webkit-transform-origin: 100% 50%;
	-o-transform-origin: 100% 50%;
}

/* 各時刻の文字 */
#ne {
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}

/*
	長いので省略。
	上と同じ指定を各文字に指定していく。
	1文字あたり 30deg をプラスする。
*/

/* 文字を回転させる */
#wadokei li > span {
	display: inline-block;
	transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
}

かなり長いですが、ほとんどは各ブラウザ用の指定ですね。
li 要素を rotate するときの回転場所の基準はちゃんと指定しないとおかしなことになります。

文字を回転させる箇所ですが、li が回転していない時点では文字が上を向いているので、内側に向くように rotate させてやればいいだけです。

文字の位置は 360 を 12 で割って、30度ずつずらして配置します。

jQuery

時計を動かします。
このコードは CSS-Tricks を参考にしました。

jQuery(function($) {

	setInterval( function() {
		var hours = new Date().getHours();
		var degree = hours * -15;
		var rotate = 'rotate(' + degree + 'deg)';
		$('#wadokei > ol').css({
			'-moz-transform': rotate,
			'-webkit-transform': rotate,
			'-o-transform': rotate
		});
	}, 1000);

});

時間を取得して、時間に -15 をかけて、それを CSS に入れているだけです。
これを1秒おきに繰り返します。

これで一応完成です。
1時間おきに15度ずつ文字盤が動く時計ができあがりました。

CSS3 と jQuery で和時計 DEMO

文字盤が回るときにアニメーションさせてみる

jQuery の animate でできそうですが、できないですね。
探してみたらプラグインがあったのでそれを使いました。

それと、せっかくなので jQuery Easing Plugin も使ってみました。
HTML の head 内で各プラグインを読み込みます。
CSS は同じ。

jQuery(function($) {

	setInterval( function() {
		var hours = new Date().getHours();
		var degree = hours * -15 + 'deg';
		$('#wadokei > ol').animate({rotate: degree}, 1000, 'easeOutElastic');
	}, 1000);

});

この Animate CSS Rotation and Scale プラグインは Opera に対応していないようです。
なのでデモページも Firefox, Chrome, Safari のみ対応です。

CSS3 と jQuery で和時計(アニメーション版) DEMO

1時間に1回しか動かないものにアニメーション指定する必要があるかどうかは疑問ですが、こんな感じです。


かなり説明が足りてないような気がしますが、これで終わりです。
正直、こんな面倒くさいことするくらいなら画像を使ったほうが早いし見た目もいいです。
まあ最初に言ったとおり、お遊びということで。

Leave a Reply