画面いっぱい(フルスクリーン)に背景画像を敷いてウインドウ縮小時も天地中央にする方法
いきなりこう書くと身も蓋もないのですが、この手のプラグインは探せば結構あるので、単に１枚の画像を背景に敷きたい場合はそういったプラグインをお使いください。
複数ある背景をイベント時に切り替える、アニメーションさせたい、など複雑なことをしたい場合結構オプションが充実してないものが多い。また、CSS3のbackground-sizeはIEの古いブラウザでつかえない。media queryを使いたくない状況などなど、修正時の事も考えると自分で1から組んだ方が早そうだな…というのが実情です。
ということで、そういった場合に直面した場合にご参考ください。
スプラッシュページを作成する場合、背景画像を一面(フルスクリーン)に敷きたいことがあると思いますが、今回はさらにウインドウを縮小しても背景画像を天地中央にする方法を取り上げます。
ノートパソコン等の小さい画面の場合ファーストビューが700pxを切ります。ブラウザによってはメニューバーの高さがけっこうあるブラウザもあります。そんなとき背景画像が例えば風景だった場合、空しか見えないなんてこともあります。。。
そんなときは画像の中央を基準として背景画像が天地中央にフルスクリーン表示されるようにする方法を今回はjQuery＆CSSで作成したいと思います。
手順1 背景画像を敷きウインドウを拡大、縮小しても画面いっぱい(フルスクリーン)に敷く
まずはDEMOをご覧ください。
ウインドウを横、縦に伸縮していただけばお分かりいただけると思いますが、画像のアスペクト比が変わらずに画面いっぱいに広がっていると思います。
仕掛けとしてはimgタグをCSSでfixedに、jQueryでwindowのresizeイベント時に画像のアスペクト比より広がっていたらwidthAjastクラスを付与して100%、高ければheightAjastクラスでheight:100%にします。
cssソース
.bg {
position: fixed;
top: 0;
left: 0;
z-index:-50;
}
.widthAjast { width: 100%; }
.heightAjast { height: 100%; }
jsソース
var theWindow = $(window),
$bg = $(".bg"),
aspectRatio = $bg.width() / $bg.height()
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg.removeClass('widthAjast').addClass('heightAjast');
} else {
$bg.removeClass('heightAjast').addClass('widthAjast');
}
}
resizeBg();
$(window).resize(function(){
theWindow = $(window),
aspectRatio = $bg.width() / $bg.height()
resizeBg();
});
しかし、このままだとウインドウの縦の高さを縮めていくと空しか見えなくなります…
手順2 背景画像の高さよりウインドウが小さくなったら天地中央にする
こちらもまずはDEMOをご覧ください。
var theWindow = $(window),
$bg = $(".bg"),
aspectRatio = $bg.width() / $bg.height(),
imgheight = $bg.height(),
imgmargin = imgheight - theWindow.height(),
v_center = imgmargin / 2;
function resizeBg() {
if(theWindow.height() < imgheight){
$bg.css('margin-top','0');
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg.removeClass('widthAjast').addClass('heightAjast');
} else {
$bg.removeClass('heightAjast').addClass('widthAjast');
$bg.css('margin-top',-v_center);
}
}else{
$('.bg').css('margin-top','0');
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg.removeClass('widthAjast').addClass('heightAjast');
} else {
$bg.removeClass('heightAjast').addClass('widthAjast');
}
}
}
resizeBg();
$(window).resize(function(){
theWindow = $(window),
aspectRatio = $bg.width() / $bg.height(),
imgheight = $bg.height(),
imgmargin = imgheight - theWindow.height(),
v_center = imgmargin / 2;
resizeBg();
});
ウインドウの高さを狭くしてみてください。背景画像のサイズがウインドウサイズよりも小さくなった(縮小された)場合、天地中央にセンタリングされているのがわかると思います。
こちらの仕掛けはウインドウサイズが小さくなった場合小さくなった分の高さの半分をネガティブマージンで位置調整しています。これで山も見えるようになりましたね。
以上、画面いっぱいに背景画像を敷いてウインドウ縮小時も天地中央にする方法でした。
Related posts
