jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTipsは【jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】】です。フルスクリーン(背景全画面)に画像を配置するプラグインは数々ございますが多機能で設定が面倒だったり、若干動きが不安定だったり、重かったりと選択に悩みます…。単純に特定要素の背景全画面に画像を配置するだけのプラグインでしたらこの【BACKSTRETCH】が軽量かつ簡易と一番のオススメです。

BACKSTRETCH ダウンロードページ

ウィンドウ全画面への実装

実装方法は至ってシンプルです。まずはウィンドウの背景全画面に画像を配置します。

読み込み

<script src="js/jquery-1.X.X.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
JS
$(function(){
$("body").backstretch("images/ctn_04.jpg");
});

特定要素への実装

特定要素の背景全画面に画像を配置します。

HTML

<div id="box"></div>
JS
$(function(){
$("#box").backstretch("images/ctn_01.jpg");
});

背景全画面スライドショーの実装

若干蛇足になりますが、全画面スライドショーの実装も簡単です。

JS

$(function(){
$("#box").backstretch([
"images/ctn_03.jpg",
"images/ctn_02.jpg",
"images/ctn_01.jpg"
], {duration: 3000, fade: 750});
});

 
以上になります。