[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
関連記事
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)
まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹
-
[CSS] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使