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だけで色んなことができちゃいますね。背景に画像を表示したい時は是非活用してみたいです。

関連記事

  1. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  2. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  3. Thumbelina

    JavaScript

    サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

  4. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  5. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  6. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

コメント

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

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP