スライドショーや背景画像を全画面(フルスクリーン)表示できるjQueryプラグインBackstretch
こんにちは、福岡のホームページ制作シンス株式会社の越水です。
美しい写真を背景画像としてブラウザ画面いっぱいに表示したい時に役立つjQueryプラグインの紹介です。
Backstretchの使い方
まずはBackstretchをWebサイトへインストールします。
次のリンク先のページからBackstretchのjsファイルをダウンロードしてきましょう。
jquery.backstretch.min.jsというプラグインファイルがダウンロード出来ると思います。
HTMLでjQueryとBackstretchプラグインファイルを読み込んでおきましょう。
1 2 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> |
次のようなコードを書けばBackstretchが実行され、指定した画像がブラウザいっぱいに背景として表示されます。
1 | $.backstretch("image01.jpg"); //画像を指定 |
ブラウザ全体ではなく、特定のブロック要素全体に画像を表示したい場合は次のようなコードになります。
1 | $("#sample").backstretch("image01.jpg"); |
フルスクリーンのスライドショーにも対応しています。
Backstretchは画像の全画面表示だけではなく、ブラウザいっぱいにスライドショーを表示させることもできます。
1 2 3 4 5 | $.backstretch([ "image01.jpg", "image02.jpg", "image03.jpg" ], {duration: 5000, fade: 1000}); |
durationでスライドの間隔を、fadeで画像切り替えのスピードを設定していて自由に値を変更することができます。
以上、とても簡単にフルスクリーン背景画像が実装できるjQueryプラグイン、Backstretchの紹介でした。
ホームページ制作だけでなくSNSの運用、リスティング広告やFacebook広告の運用サポートも行っています。