Starfield

JavaScript

宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

Starfieldは宇宙空間を移動するような背景アニメーションを実装することができるjQueryプラグインです。宇宙好きの方にはピッタリのプラグインです。使い方もとてもシンプルなので手軽に利用できるのがいいですね。

Starfieldの使い方

Starfieldを実際に試してみたところ使い方がとても簡単でした。jQueryとプラグインを読み込んだら以下のようにセットするだけです。背景にしたい要素をセレクタに設定してあげます。

$(function(){
    $('#sample').starfield();
});

オプションを指定する場合は以下のように記述します。

$(function(){
    $('#sample').starfield({
        starDensity: 2.0,
        mouseScale: 0.5,
        seedMovement: true
    });
});

starDensityは数値を上げることで星の密度が高くなります。デフォルトは1.0です。mouseScaleは数値を上げることでマウスの動きに応じて移動するスピードが速くなります。こちらもデフォルトは1.0になります。

また、seedMovementのデフォルトはtrueなのですが、こちらはページが読み込まれた時に自動でアニメーションがスタートする設定です。falseにすることでページが読み込まれただけではアニメーションせず、マウスを動かした時にスタートするようになります。

というわけで、簡単に宇宙空間の背景アニメーションを実装することができるjQueryプラグイン「Starfield」のご紹介でした。

Starfield

関連記事

  1. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  2. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  3. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  4. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  5. CSS Emoticons
  6. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP