JavaScript

画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

ブラウザの画面全体に背景を表示させることができるjQueryプラグイン「bgStretcher」を使ってみました。画像を複数指定することでフェードやスライドで切り替えたり、ページナビをつけたりと機能も充実しているかと思います。ということで以下使い方です。

[ads_center]

使い方

いつも通り、head内にjQuery本体とダウンロードしたプラグインファイルを読み込んでいきます。

<link rel="stylesheet" type="text/css" href="../bgstretcher.css" />
<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>

そしてbgStretcherの設定をします。bodyに背景をセットするには以下のようにします。

<script type="text/javascript">
$(document).ready(function(){
    $('body').bgStretcher({
        images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg']
    });
});
</script>

これだけで設定した画像が表示されるようになります。とても簡単ですね。

ページネーションをつけたい

オプションで指定することでページナビなんかもつけることができます。

<script type="text/javascript">
$(document).ready(function(){
    $('body').bgStretcher({
        images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
        pagination: '#nav'
    });
});
</script>

で、ページナビを表示させたいとこに以下のように記述します。

<div id="nav"></div>

この他にもprev、nextで背景を切り替えたり、スピードを設定したりといった便利なオプションが色々あります。

とてもシンプルで使いやすいプラグインですね。これに似たプラグインで以前jQuery Backstretchというのを紹介しました。こちらも使いやすくてオススメです。実際に使う場合は両方を試してみて自分に合うものを選択していけばいいかと思います。

今回の実際のデモやダウンロードは公式サイトで確認することができます。

関連記事

  1. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  2. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  3. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  4. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  5. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  6. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP