いつか役立つ!?スターウォーズぽい星空を背景に描けるjQueryプラグイン「Starfield」

完全にネタ系のjQueryプラグインですが、動く星空を敷くことができます。
このjQueryプラグインjQuery Starfieldをいつか使用する時のために頭の片隅においておきましょう。
いつか役立つ!?スターウォーズぽい星空を背景に描けるjQueryプラグイン「Starfield」サンプル

使用方法
jQuery Starfieldからファイル一式をダウンロード。
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-starfield.js"></script>
<script type="text/javascript">
$(function () {
$('.class名').starfield({
starDensity: 1.0, //星密度:数値を上げると星が増える
mouseScale: 1.0 //マウスの動き:数値を上げると星の動きが早くなる
});
});
</script>

上記のようにしたらスターフィールドを記述します。
<div class="class名">
<div class="class名2">
コンテンツ
</div>
</div>

特性上canvasで全面に敷いてしまうので、コンテンツはCSSで上部に表示されるようにする必要があります。
html, body, .class名1, .class名2{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.class名1 {
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: #fff;
}

いつか役立つ!?スターウォーズぽい星空を背景に描けるjQueryプラグイン「Starfield」サンプル

sponsors

「いつか役立つ!?スターウォーズぽい星空を背景に描けるjQueryプラグイン「Starfield」」をシェアする

記事作成:
記事URL:

TOP > > > いつか役立つ!?スターウォーズぽい星空を背景に描けるjQueryプラグイン「Starfield」