ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : JavaScript

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

Backstretchの使い方

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

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

Backstretch

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

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

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

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

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

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

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

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

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

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

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。