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. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  2. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  3. respontent

    JavaScript

    様々なコンテンツをレスポンシブにしてくれるjQueryプラグイン「respontent」

    respontentというjQueryプラグインを使えば、画像・You…

  4. FSVS(Full Screen Vertical Scroller)
  5. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

コメント

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

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP