宇宙をイメージしたパララックスがたった1行で作れる「StarScroll」

「StarScroll」は上から下へ星が流れるアニメーションを実装するjQueryプラグインです。まさに宇宙のようでありパララックスデザインにピッタリ。

StarScroll

Starscroll

この昔ながらなアーケードゲーム感がたまらないデザインですね。このプラグインで実装できるのは背景となっている星が流れるアニメーションのみです。デザインが2つ用意されています。まずは”16bit”デザイン。

Starscroll-demo-1

 

そして”8bit”デザイン。古めかしい。

Starscroll-demo-2

 

 

それでは「StarScroll」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="starscroll.min.js"></script>

 

HTMLはこのようにマークアップします。

<div id="starfield"></div>

 

CSSはこのように指定します。

div {
  width: 100%;
  height: 100%;
  background-color: black;
}

 

JavaScriptはこのように実装します。オプションについては上記リンク先よりたどっていただくと説明があります。

$('#starfield').starscroll(16,3,50,5);

 

するとこのように作ることができました。

StarScroll-sample-1

 

あまり需要はなさそうですが、、、パララックスデザインで宇宙空間を表現したい人は参考にどうぞ。

 

Home > JavaScript > 宇宙をイメージしたパララックスがたった1行で作れる「StarScroll」

Return to page top