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. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  2. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  3. no-image
  4. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  5. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP