ファーストビューをフルスクリーン対応デザインにしてみた

もうひとつの運営サイト「大切な記録」のキービジュアルをフルスクリーン対応にしてみました。フルスクリーンに耐えさせる画像のチョイスは

ボカしていてもビジュアルとして成り立つ
フルスクリーンに耐えられる大きさ
被写体が引いてある

といったところでしょうか？キャッチコピーなどの文字周り系は完全に別画像にしたほうが良いでしょう。今回僕は「ボカしていてもビジュアルとして成り立つ」画像を用意しました。シングルページにする想定ではありませんでしたが、そこそこ大きな画像ができたのでもしかするとそのうちシングルページになっているかもしれませんが今回はキービジュアルのみで、スクロール等の仕掛けも無しです。あくまでファーストビューのみフルスクリーンになるていです。

.height()で高さを取得する

実装したサイトはレスポンシブです。PCとタブレットはフルスクリーンでもいいですが、スマホのポートレートがフルスクリーンなのは嫌すぎるので、まずは横幅を.width()で取得し、ウィンドウ幅が601px以上の時にだけフルスクリーンになるようにします。.height()で高さを取得し、グローバルナビの高さを引いた数値をファーストビューブロックに挿入します。関数化しているの読み込んだ時と、リサイズした時に実行するためです。

function kvw(){
	var w = $(window).width();
	var x = 601;	
	if (w >= x) {
		var wh = $(window).height();
		var kh = (wh -= 60); 
		$('.kv').css('height',kh+'px');

	}
}

function kvw(){

var w = $(window).width();

var x = 601;

if (w >= x) {

var wh = $(window).height();

var kh = (wh -= 60);

$('.kv').css('height',kh+'px');

}

キャッチコピーの天地を中央にするために、取得した高さを２で割、更にコピーの高さ+微調整分引いて、キャッチコピーのパディングに設定します。

function kvp(){
	var w = $(window).width();
	var x = 601;	
	if (w >= x) {
		var wh = $(window).height();
		var kh = (wh -= 270); 
		var kvpt = (kh /= 2);
		$('.kvc').css('padding-top',kvpt+'px');
	}
}

function kvp(){

var w = $(window).width();

var x = 601;

if (w >= x) {

var wh = $(window).height();

var kh = (wh -= 270);

var kvpt = (kh /= 2);

$('.kvc').css('padding-top',kvpt+'px');

}

それぞれの関数を、読み込んだ時、リサイズしたとき用に呼び出します。

jQuery(function($){
	kvw(); 
	kvp(); 
});
jQuery(window).resize(function($){
	kvw();
	kvp();
});

jQuery(function($){

kvw();

kvp();

});

jQuery(window).resize(function($){

kvw();

kvp();

});

基本的にはこれだけですが、IE7,8に対応させるにはもう一工夫必要です。というのもIE7,8はCSS3のbackground-sizeに対応していないからです。ググってみると対応できそうなjsが配布されていましたが、このサイトはIE7,8には対応いたしませんので、今回は導入していません。実務で同じ事をやる機会があったらその時に対応します。

実装したページはこちらから

2014年03月22日土曜日
：Naruhiko Wakai

BLOG

ファーストビューをフルスクリーン対応デザインにしてみた

.height()で高さを取得する

Sponsored Links

comments コメントをキャンセル

Sponsored Links

Naruhiko Wakai