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. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  2. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  3. Sliding Panels Template
  4. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  5. Bootstrap Dropdown Hover
  6. Inspiration for Grid Loading Animations

コメント

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

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

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP