【jQuery】壮大な宇宙をウェブページの背景に描く[Starfield]の使い方。Tags【jQuery】壮大な宇宙をウェブページの背景に描く[Starfield]の使い方。ONZEhttps://on-ze.com/archives/4198HomeBlog【jQuery】壮大な宇宙をウェブページの背景に描く[Starfield]の使い方。Google以前CSSベースのオリジナル・デザインで[DarkForce.css]というテクニックを紹介しました。宇宙空間をワープするようなダイナミックな動きで、完全にスタイルシートのみで実装できる点がウケて多くの方にダウンロードいただけました。今日は[DarkForce.css]と同じように、宇宙空間をウェブページ上に描くjQueryプラグイン[Starfield]を紹介します。サンプルをご覧いただきたいのですが、ここは試しに[DarkForce.css]と[Starfield]を見比べてみると面白いかもしれません。DARKFORCE実装サンプル:Starfieldどちらも『男のロマン』を掻き立てますよね!使い方は超カンタン!基本的にはjQueryの設定だけです。必要なファイル[jquery-starfield.js]をダウンロードしてきます。Pluginダウンロードしたzipファイルを解凍して[jquery-starfield.js]をHTMLの適当な箇所で読み込みます。src="jquery-starfield.js"></script<このとき忘れずに[jquery.js]も読み込みます。順番は[jquery-starfield.js]よりも先に[jquery.js]が来るようにします。続いては[Starfield]を描画させるボックス要素を、jQueryのコードを記述して指定します。いうボックス要素が用意してある場合、以下のように記述することになります。<script>$(function(){$('#starfield').starfield();});</script>たったコレだけで実装可能。オプション設定[Starfield]では3つのオプションを指定して動きをカスタマイズすることができます。各オプション項目は次のとおり。starDensity星の密度。数値を上げると星の数が増えていく。mouseScaleマウスの動きに反応して動くスピード。seedMovement「true」にすると自動でアニメーションがスタートする。「false」にするとページ読み込み時は動作せず、マウス操作に反応して動くようになる。オプション設定の書き方は次のようになります。true});});</script>わざわざボックス要素を用意せずに<body>要素に直接[Starfield]を効かせてしまうことも可能です。<script>$(function(){$('body').starfield();});</script>......このほうがよりシンプルですね。[Starfield]は驚くほど簡単にウェブサイトの背景がカッコ良くなる優れものです。PluginTwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】郵便番号を入力すると住所を自動補完する[jquery.jpostal.js]が便利です。【jQuery】幾何学的でオシャレな背景を描画する[Particleground]の実装方法。