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. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

  2. HR Navigation Responsive Menu
  3. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  4. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  5. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  6. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP