ColorFullWeb

カラーがフルな情報配信ブログ。Web関係多め。

【javascriptパターン】背景全画面表示に学ぶ、リサイズ方法【jQuery】

time 2013/03/19

ラクガキ130319

画像に意味はありません。ただのラクガキです!(キリッ)
こんにちわ。@i_saku39です。

 
 
 

【前書き】背景全画面って魅力的ですよね♪

自分はデザイナー出身なのでまず、javascriptはjQueryから入ったわけですが、

触れ始めた頃、背景の全画面表示ってすごく魅力的だったのを覚えています。

今はデザインの難しさが分かっているのであまり選択肢としては上がってきませんが。(理由は最後に書いてあります。)

今はそれを実現するためのプロセスの違いについて興味があるのでまとめてみました。

今回の記事で重要なこと
■画像のサイズをいじる系の処理を書くとき応用できること
■それが頭で考えないで自然と口をついて出ること

 
 
 

【さっそく】比較してみよう

比較するのはこのブログ2つ、どちらも素晴らしいブログです。(JS以外も面白い記事がたくさんあります。)
Black Flag
WebOPixel
 
 
 

【まず】Black Flag

だいたい、この辺で背景のリサイズをかけています。
(抜粋なのでこのスクリプトは正常に動作しません。リンク先参照です。)

var stretchId = '#fullbg_stretch';
var stretchImg = $(stretchId).children('img');

selfWH = stretchImg.width() / stretchImg.height();//この行が特に数学的思考を感じます。

var bgWidth = $(window).width(),
bgHeight = bgWidth / selfWH;

if(bgHeight < $(window).height()){
	bgHeight = $(window).height();
	bgWidth = bgHeight * selfWH;
}

$(stretchId).css({width:bgWidth,height:bgHeight});
$(stretchImg).css({width:bgWidth,height:bgHeight});

 
 
 

【次に】WebOPixel

こちらは文学的な印象を感じます。
 
jQueryで背景画像を全画面表示する – WebOPixel
var imgW = 2000;
var imgH = 1332;
var winW = $(window).width();
var winH = $(window).height();
var scaleW = winW / imgW;
var scaleH = winH / imgH;
var fixScale = Math.max(scaleW, scaleH);//この判定のさせ方、ここまでのプロセスが文学的思考を感じる
var setW = imgW * fixScale;
var setH = imgH * fixScale;
var moveX = Math.floor((winW - setW) / 2);
var moveY = Math.floor((winH - setH) / 2);

	$('#bg').css({
		'width': setW,
		'height': setH,
		'left' : moveX,
		'top' : moveY
	});

 
 
 

【個人的な意見】ケースバイケース

処理の時、

変数が少なくて済むのがBlack Flagさん

変数が多いがぱっと見で何をしているか分かり、とても直観的なWebOPixelさん

簡単に表現してしまうとこんな感じです。
(ほんとはこんな簡単な話ではないです。お二方すみません笑)
 
 
 

【余談】なぜ自分がデザイン時に背景画像を使わないか

まず、

チョーむずい。。。

ハッキリ言って、この技術を使った瞬間、デザインではなくアートになります。
パララックスと同じ、流行りものです。(極端ですが)

個人的に、、、
デザインと、アートの定義はまったく違います。
(ココのこだわりについてはまた記事を書きたいと思ってます。)
写真家、デザイナーのポートフォリオならいいですが、
自分からオススメするケースは少ないと思います。

down

コメントする