[jQuery] 背景画像を画面いっぱいにするプラグイン
公開日:
:
jQuery, Web制作 javascript, jQuery
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
背景に、画像をいっぱいに広げて表示したいときってありますよね。
ちょうど、そういう必要があったため、jQueryのプラグインをたくさん試しました。
そんな中から、本当に使えたプラグインを紹介します。
BACKSTRETCH
設置も簡単かつ、軽量で使い勝手が本当によかったです。
かなりの数のプラグインを試しましたが、画面サイズをぐりぐり変えても問題ないなと思ったのが、BACKSTRETCHだけでした。
ダウンロードは下記のページからできます。
http://srobbin.com/jquery-plugins/backstretch/
設置方法
まずは、jsを追加していきます。
<script src="js/jquery.js"></script> <script src="js/jquery.backstretch.min.js"></script>
そして、背景画像を設定します。
$(function(){ $("body").backstretch("images/ctn_04.jpg"); });
これで、完成です。
画面いっぱいに表示したいので、このようにbodyに設定する事が多いでしょう。
他の要素に設定したいよ!って場合は、下記のようにしましょう。
<div id="bg"></div>
$(function(){ $("#bg").backstretch("images/ctn_04.jpg"); });
これで、idがbgの部分にいっぱいに表示されます。
さらに、画面いっぱいでスライドショーもしたいよ!という要望にも応えられます!
設定方法は、
$(function(){ $("#bg").backstretch([ "http://dl.dropbox.com/u/515046/www/outside.jpg" , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg" , "http://dl.dropbox.com/u/515046/www/cheers.jpg" ], {duration: 3000, fade: 750}); });
このように、画像の数をふやして、切り替えのタイミングを設定するだけです。
導入してもよさそうな気になりますよね。
まとめ
実際に、かなりたくさんのプラグインがありますし、個人個人で使用の仕方も違いますから一概にこれが一番とは言えません。
ですが、今回かなりの数を試したときに、最初は全画面で表示されるけどウィンドウサイズを変更したら背景もおかしくなっちゃうってことがすごく多かったです。
BACKSTRETCHだけは、思い通りになりました。
しかも、多くのプラグインはbodyのすぐ下にimgタグを置いちゃうんです。
それもあまり好きではないなーと感じていたので、BACKSTRETCHが一番しっくり来ました。
背景に画像を画面いっぱいに表示したいよ!って時は、是非使ってみてください。
ad
関連記事
-
[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)
まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると