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. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  2. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

  3. Relocator
  4. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  5. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  6. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

コメント

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

最近の記事

  1. カメラマングローブ Grip Hot Shot III
  2. 包(つつむ)巾着ポーチ
  3. KMC-80BK
  4. 味噌ラーメン〜旨辛にんにく味噌〜

Instagram始めました

Facebookページ

PAGE TOP