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

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

Backstretchの使い方

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

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

Backstretch

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

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

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

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

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

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

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

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »