BLOG

  • Facebook
  • Twitter

スライドショーや背景画像を全画面(フルスクリーン)表示できるjQueryプラグインBackstretch

こんにちは、福岡のホームページ制作シンス株式会社の越水です。

美しい写真を背景画像としてブラウザ画面いっぱいに表示したい時に役立つjQueryプラグインの紹介です。

Backstretchの使い方

まずはBackstretchをWebサイトへインストールします。

次のリンク先のページからBackstretchのjsファイルをダウンロードしてきましょう。

Backstretch

jquery.backstretch.min.jsというプラグインファイルがダウンロード出来ると思います。

HTMLでjQueryとBackstretchプラグインファイルを読み込んでおきましょう。

次のようなコードを書けばBackstretchが実行され、指定した画像がブラウザいっぱいに背景として表示されます。

ブラウザ全体ではなく、特定のブロック要素全体に画像を表示したい場合は次のようなコードになります。

フルスクリーンのスライドショーにも対応しています。

Backstretchは画像の全画面表示だけではなく、ブラウザいっぱいにスライドショーを表示させることもできます。

durationでスライドの間隔を、fadeで画像切り替えのスピードを設定していて自由に値を変更することができます。

以上、とても簡単にフルスクリーン背景画像が実装できるjQueryプラグイン、Backstretchの紹介でした。

ホームページ制作だけでなくSNSの運用、リスティング広告やFacebook広告の運用サポートも行っています。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!