ぐるぐる光線を CSS3 アニメと JavaScript で作る

Web デザイナー、クリエイターが Flash をあきらめ、滑らかな UI を作り出すのいろいろ苦労していますが、ここではシンプルに JavaScript でぐるぐる光線 を作ってみます。

旭日旗のデザインで作ります。

スタイルシートに追加するCSSはほとんどありません。

 css
#twirl	 {
	background ：url(ぐるぐる画像.png) 0  0 no-repeat;
	position:    absolute;
	top:         0;
	left:        0;
	width:       500px;
	height:      500px;
	transform:   scale(1) rotate(960.735631deg);
}

ぐるぐる回転の画像は背景画像(background)として指定します。
寸法は、上の例では 500px の正方形にしています。回転させるので正方形が妥当です。
少しの角度しか回転させないのであれば、どんな矩形でも問題なさそうです。

JavaScript

ぐるぐる回転効果は、JavaScript を使用してブラウザー固有の CSS3 アニメーションプロパティを更新することで機能します。

つまり、一番最初にするべきはブラウザの種類を検出することになります。

今回はMooTools の Browser オブジェクトを使用してどのブラウザーかを検出することにしました。

 css
var cssPrefix = false;
switch(Browser.name) {
	case "safari":
		cssPrefix = "webkit";
		break;
	case "chrome":
		cssPrefix = "webkit";
		break;
	case "firefox":
		cssPrefix = "moz";
		break;
	case "opera":
		cssPrefix = "o";
		break;
	case "ie":
		cssPrefix = "ms";
		break;
}

jQuery やその他のライブラリーは、ユーザーがアクセスしてくるブラウザーの種類を見つけるためのメソッドが搭載されています。

詳しくはコードを見ていただくとして、この効果は Webkit ベースのブラウザー（Chrome、Safari、Webkit-mobile）、Firefox、Edge、および Opera をサポートします。現在のブラウザーが検出されたら、setInterval ディレクティブを設定して、要素の回転角度を定期的に変化させるようにします。

 css
// ぐるぐる回転！
if(cssPrefix) {
	var twirl = document.getElementById("twirl"), degrees = 0, speed = 0.05;
	setInterval(function() {
		degrees += speed; // インターバルごとに回転角度を増やす
		rtwirl.setAttribute("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
	},20);
}

MooTools を使うと、次のように書けます。MooTools は以下の公式サイトよりダウンロードできます。

MooTools： https://mootools.net/

ダウンロードが嫌な方は、

 html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core-compat.min.js"></script>

とやってページに取り込みます。

 css
// ぐるぐる回転！
if(cssPrefix) {
	var twirl = $("twirl"), degrees = 0, speed = 0.05;
	(function() {
		degrees += speed; // インターバルごとに回転角度を増やす
		twirl.set("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
	}).periodical(20);
}

試したところ、20 ミリ秒あたりで調整すると、スムーズに回転効果が得られます。
ただ、注意すべきは、画像の回転そのものがユーザーの注意を引いてしまうと、サイトとしてはイマイチ感が出てしまいます。

速度を変化させると、どんな感じなのか、簡単に変えることができるようアンカをつけておきます。

 css
twirl.addEvents({
	mouseenter: function() { // 超高速で回す！
		speed = 0.25;
	},
	mouseleave: function() { // 初期速度に戻す
		speed = 0.05;
	}
});

デモを以下のページに置いておきます。

ぐるぐる回転効果は、いかに滑らかに見せるかがポイントです。CSS プロパティを利用して回転効果を演出しているのは、そちらの方がパフォーマンスに優れるからです。

そうすれば、ブラウザにネイティブ（ブラウザが直に理解してくれるので）なので、最適さは増します。

アニメーション効果を多用すると、ブラウザに負担をかけがちになるため、この効果を多用しすぎるとユーザーに嫌われるかもしれません。

現在のところ、Chrome 系のブラウザがこのアニメーションをうまく扱える感じを受けますが、テストした環境では、Safari、FireFox、Edge、Opera でも問題なく滑らかな効果が得られています。