back-i

オススメポイントは、軽量で設置もとっても簡単にできるところです。

圧縮されたmin版で4Kほどで、動きもとってもなめらか。

jQueryプラグイン『BACKSTRETCH』

背景だけでなく、特定の要素内でも使え、ただ表示させるだけじゃなくて、フェードで複数の背景を切り替えたりといったことまでできます。

back

※ デモは、上記リンクから見ることができます。

githubからdownloadもできます。

使い方

1. 上記のURLよりjQueryプラグインをダウンロードします。

2. jQuery(version 1.7 or newer)とプラグインのファイルを読み込みます。

こうしてjQuery本体とbackstretchを読み込んだ上で

単一の画像を背景ピッタリに表示する場合

このように画像ファイルへのパスを指定するだけです。

単一の画像を特定要素にピッタリに表示する場合

特定要素も背景の場合とあまり変わりませんが、表示させたい要素と画像ファイルへのパスを指定するだけです。

クリックで画像を切り替える場合

HTML側には、ボタンを作成しておきます。

これで、ボタンを押すと画像が入れ替えることができます。

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

durationとfadeはお好みで。

DEMO

スライドショーのデモを作成してみました。

対応ブラウザ Google Chrome / Firefox では確認済

やはり全画面の背景画像はとてもインパクトありますね。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る