【jQuery】壮大な宇宙をウェブページの背景に描く［Starfield］の使い方。

以前CSSベースのオリジナル・デザインで［DarkForce.css］というテクニックを紹介しました。
宇宙空間をワープするようなダイナミックな動きで、完全にスタイルシートのみで実装できる点がウケて多くの方にダウンロードいただけました。

今日は［DarkForce.css］と同じように、宇宙空間をウェブページ上に描くjQueryプラグイン［Starfield］を紹介します。

まずはサンプルをご覧いただきたいのですが、ここは試しに［DarkForce.css］と［Starfield］を見比べてみると面白いかもしれません。

実装サンプル：CSS3 DARKFORCE
実装サンプル：Starfield

どちらも『男のロマン』を掻き立てますよね！

使い方は超カンタン！
基本的にはjQueryの設定だけです。

何はともあれ。
まずは必要なファイル［jquery-starfield.js］をダウンロードしてきます。

ダウンロード：Starfield jQuery Plugin

ダウンロードしたzipファイルを解凍して［jquery-starfield.js］をHTMLの適当な箇所で読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
%lt;script src="jquery-starfield.js"></script<

このとき忘れずに［jquery.js］も読み込みます。
順番は［jquery-starfield.js］よりも先に［jquery.js］が来るようにします。

続いては［Starfield］を描画させるボックス要素を、jQueryのコードを記述して指定します。
例えば <div id="starfield">〜</div> というボックス要素が用意してある場合、以下のように記述することになります。

<script>
$(function(){
	$('#starfield').starfield();
});
</script>

たったコレだけで実装可能。
驚くほど簡単ですね。

［Starfield］では３つのオプションを指定して動きをカスタマイズすることができます。
各オプション項目は次のとおり。

starDensity: 星の密度。数値を上げると星の数が増えていく。デフォルト値は1.0。
mouseScale: マウスの動きに反応して動くスピード。デフォルト値は1.0。
seedMovement: 「true」にすると自動でアニメーションがスタートする。
「false」にするとページ読み込み時は動作せず、マウス操作に反応して動くようになる。デフォルト値はture。

オプション設定の書き方は次のようになります。

<script>
$(function(){
	$('#starfield').starfield({
		starDensity: 2.0,
		mouseScale: 1.5,
		seedMovement: true
	});
});
</script>

わざわざボックス要素を用意せずに<body>要素に直接［Starfield］を効かせてしまうことも可能です。

<script>
$(function(){
	$('body').starfield();
});
</script>

……このほうがよりシンプルですね。

［Starfield］は驚くほど簡単にウェブサイトの背景がカッコ良くなる優れものです。
ぜひお試しください。

ダウンロード：Starfield jQuery Plugin

ONZE/BLOGオンズ開発ブログ