酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

BACKSTRETCH 写真をWebページの背景全画面に表示[jQuery Plogin]

Where?Webページの背景全画面に写真を表示してくれるjQuery Plugin「BACKSTRETCH」の紹介です。自動でリサイズしてくれたり、幾つかのエフェクトを加えることができます。特定のブロックの背景だけを写真にすることも可能です。

Backstretch


組み込み手順

以下のコードをhtmlファイルに組み込みます。

1
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script>

ちなみにhamlを使っている場合はこちら。

1
= javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js'

サンプル1: 背景全画面に写真を表示するだけ

1
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

fpu_tmp_1356006986.5085_35105e

サンプル2: スライドショー形式で一定時間ごとに変化させる

1
2
3
4
5
 $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750}); //duration, fadeで変化のタイミングを調整できます

写真だと説明が難しいですが、これで3つの写真が3秒ごとに自動で入れ替わります。

fpu_tmp_1356007209.807_126e12

サンプル3: ボタンを押すと背景が変化

1
2
3
4
5
6
7
8
9
$("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
});

$("#cheers").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/cheers.jpg');
});

ボタンを押すと背景画像が変化します。

fpu_tmp_1356007432.4496_38c4f9

サンプル4: 特定のブロックの背景を写真にする

1
2
3
4
5
6
7
8
9
$("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
});

$("#cheers").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/cheers.jpg');
});

中央のボックスの背景が写真になっています。

スクリーンショット 2012-12-20 21.42.11

公式ページがデモにもなっています。よかったら覗いてみてください!

Backstretch

おすすめの書籍