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

jqueryIntroLoaderページが読み込まれるまでローディングアニメーションを表示できる「jqueryIntroLoader」前のページ

Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」次のページWebSnowjq.js

関連記事

  1. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

  2. Stretchy

    JavaScript

    入力した文字数に合わせて可変するフォーム実装「Stretchy」

    Stretchyは入力した文字数に合わせてボックスが伸び縮みするフォー…

  3. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  4. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

  5. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP