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というのを紹介しました。こちらも使いやすくてオススメです。実際に使う場合は両方を試してみて自分に合うものを選択していけばいいかと思います。

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

WordPressのログイン時のツールバーWordPressで現在のページのカテゴリー名を出力するにはsingle_cat_titleを使う前のページ

WordPressで現在のページのタグ名を出力するにはsingle_tag_titleを使う次のページWordPressのログイン時のツールバー

関連記事

  1. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  2. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  3. jquery.matchHeight.js
  4. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

  5. Kontext

    JavaScript

    iOSの画面切り替えのようなスライドができるJavaScript「Kontext」

    KontextというJavaScriptを使えばiOSの画面切り替えの…

  6. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

コメント

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

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

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP