JavaScript

jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery Backstretch」を試してみました。ただ表示させるだけじゃなくて、フェードで複数の背景を切り替えたりといったことまでできます。使い方はめちゃくちゃ簡単です。全画面の背景画像はとてもインパクトあってかっこいいですね。

[ads_center]

jQuery Backstretchの使い方

下記のURLよりダウンロードします。

あとはjQueryとプラグインのファイルを読み込んで画像のパスを指定すればいいだけです。

<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
     $.backstretch("sample.jpg");
</script>

これだけでブラウザのサイズに合わせた背景画像が表示されます。とても便利です。

スライドショーで複数の画像を切り替えてみる

フェードで切り替わるスライドショーもできちゃいます。お好みのスピードなども簡単に調整可能です。

<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    var images = [
        "sample1.jpg",
        "sample2.jpg",
        "sample3.jpg"
        ];
        $(images).each(function(){
           $('<img/>')[0].src = this;
        });
        var index = 0;
        $.backstretch(images[index], {speed: 1000});
        setInterval(function() {
            index = (index >= images.length - 1) ? 0 : index + 1;
            $.backstretch(images[index]);
        }, 5000);
</script>

var imagesに、スライドショーで使用したい画像を指定します。画像が切り替わる時のアニメーションのスピードを変更する場合は以下の部分を変更します。

 $.backstretch(images[index], {speed: 1000});

上記の1000という数値を変更します。数値が低い程速く、高い程遅くなります。また、画像が切り替わる間隔のスピードを変更したい場合はこちらを変更します。

$.backstretch(images[index]);
        }, 5000);

この、5000という数値を変えると変更できます。こちらも数値が低い程速く、高いほど遅くなります。フェードで画像が切り替わっていきます。

特定の要素をクリックで画像を切り替える

自分で指定した要素をクリックすると画像が切り替わるようにすることもできます。こんな感じで指定してみます。

JavaScript

<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $.backstretch("sample1.jpg", {speed: 500});
    $("#image1").click(function() {
       $.backstretch("sample1.jpg");
    });
   
    $("#image2").click(function() {
       $.backstretch("sample2.jpg");
    });
</script>

HTML

<input type="button" id="image1" value="サンプル画像1" />
<input type="button" id="image2" value="サンプル画像2" />

これで、image1がついたidをクリックするとsample1.jpgという画像が、image2がついたidをクリックするとsample2.jpgがフェードで切り替わります。ちなみに上記のスクリプトはヘッダーに記述するとうまく動作しませんでした。フッターに書いたらうまく動きました。クリックする要素より下に記述する必要があるかもです。

こちらも画像が切り替わるアニメーションのスピードを変更したい場合には以下の部分の数値を変更します。

$.backstretch("sample1.jpg", {speed: 500});

先程と同様に500に設定している数値を変更すればアニメーションのスピードが変わります。数値が低いほど速く、高いほど遅くなります。こんな感じでjQuery Backstretchだけで色んなことができちゃいますね。背景に画像を表示したい時は是非活用してみたいです。

あとで読むサービス「Read it Later」をMacで快適に読むアプリ「ReadNow」前のページ

WordPressのheader.php内でよく使いそうな関数などをまとめてみた次のページ

関連記事

  1. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  2. Responsive 3d Fold Scroll
  3. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  4. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  5. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

コメント

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP