サイトの背景に夜空の星を表示することができるjQueryプラグインです。
マウスの動きに合せて、星が流れるような動きをします。
サンプルを作りましたので、サンプルを見ていただいたほうが早いかと。
星空をサイトの背景画像にするjQueryプラグイン「jQuery Starfield」サンプル
実際のところ、どういう場面で使えるのかすこし頭を抱えるところではあります・・。でも、アイデア次第でインパクトのある使い方ができるはず。
使用方法
まずはこちらのサイトから進んで、ファイル一式ダウンロードします。
次に＜/body＞直前などに必要なファイルを読み込ませます。ファイル名やパスに注意。
|
1 2 3 4 5 6 7 8 9 10 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/jquery-starfield.js"></script> <script type="text/javascript"> $(function () { $('#クラス名').starfield({ starDensity: 1.0, mouseScale: 1.0 }); }); </script> |
＜body＞内に以下のように記述します。
|
1 2 3 4 5 |
<div id="クラス名"> <div class="content"> コンテンツ（テキスト、画像など） </div> </div> |
オプションは以下のとおり。
・ starDensity (default 1.0): 星の多さ。
・ mouseScale (default 1.0): マウスに合わせた星の動きのスピード。
・ seedMovement (default true): ページが開いてからすぐに星をスクロールさせるか。falseだとマウスをのせるまでは動かない。
最後にサンプルのソースを書いておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> html, body, #starfield-div, .content { height: 100%; width: 100%; margin: 0; padding: 0; } .content { position: relative; top: 0; left: 0; height: 100%; width: 100%; color: #fff; } </style> </head> <body style="width:100%;height:100%;margin:0;"> <div id="starfield-div"> <div class="content"> <h1>星空を背景にするjQueryプラグイン「jQuery Starfield background plugin」</h1> </div> </div> <script src="js/jquery-starfield.js"></script> <script type="text/javascript"> $(function () { $('#starfield-div').starfield({ starDensity: 1.0, mouseScale: 1.0 }); }); </script> </body> </html> |
あわせてお読みください
ZooMove ZooMoveは、マウスオーバーで画像を拡大させてみせることができるjQueryプラグインです。 画像を一部を詳細に見せたいときなどに効果的。こ…
Photoshopなどのグラフィックソフトウェアなどに搭載されているレイヤー (Layer) とは、画像をセル画のように重ねて使うことができる機能です。 このレ…
jQuery Gloss 画像にマウスオーバーするとキランと光ったような効果が出せるのが、jQueryプラグイン「jQuery Gloss」です。 クリスマス…
コメントを残す