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

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  2. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  3. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  4. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  5. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

コメント

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

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

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP