せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

【Webデザイン】 【jQuery】友達のサイトを作ったよ

お友達が個展を開くので、
そのサイトを作ったよ。

完成したサイトはこちら

岡山県で遠いけれど、近くの方は是非!
私もこの勉強期間が終わっていたら。。いきたい。


 

石井さんの要件

そんなに凝らなくてもいい
字体は明朝

ざっくり!

以下、作業中に学んだことなど。
  

floatとpositionの併用

float:left で左右に要素を並べて、かつ右側にpositon指定を行いたい。
左側の要素に幅を指定して、右側にその幅分の余白を持たせれば解決

.base {
	position:relative;
}
.child_left{
	float: left;
	width: 450px;
}
.child_right {
	position:absolute;
	bottom: 10px;
	left: 450px;
}


 

かつ、右側の要素を下揃えにしたい

これが大変だった。。
ポイントは、親要素のmin-heightは子要素に伝播しない。
これに気付かず嵌り続けた。。orz

#親要素
.post_card {
	position:relative;
	min-height:628px;
}
#左側の要素
.hidari_photo{
	float: left;
	width: 450px;
}
#右側の要素(殻)
.migi {
	position:absolute;
	left: 450px;
	min-height:628px;
}
#右側の要素(中身)
.migi_no1 {
	position: absolute;
	bottom:0px;
}

 

明朝体

字体は明朝体がいい

にお答えして。
 

font-family: "ヒラギノ明朝 Pro W6",
 "Hiragino Mincho Pro","HGS明朝E","MS P明朝",serif;

 
しかしこれだと、Safariでは明朝体が効かない。
まあよし。

 

jQueryでアニメーション

アニメーション要素が複数&待ち時間を表現したいときにはDeferred関数。
animateメソッドを使って簡単に書けたら楽なんだけどな。。
いまのところ方法が分からず。
JavaScriptのコールバック関数と()と{}の羅列が苦手。。読みにくくない?
 
■一部抜粋

function() {
	var dfd = $.Deferred();
	dfd.then(
		function(){
			$("#loadingWrap").remove();
			return $("#content").hide();
		}
	).then(
		function(){
			 return jQuery.Deferred(function(dfd) {
				setTimeout(function() {
					$("#content").fadeIn(2000);
					dfd.resolve();
				});
			});
		}
	);
	dfd.resolve();
}

こういうアニメーションになるよ。
自分のサイトはもうすこし複雑。


 

ローディング画面

初回表示の容量が大きいため、
ローディングが完了してからアニメーションを開始する。

ポイント1

$(window).loadを使う

通常の $(document).readyでは画像のロード前に開始されてしまうので、
$(window).loadを使用してアニメションを実施。

window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。

http://semooh.jp/jquery/api/events/ready/fn/

体感速度の向上は嬉しいけれども今回だけは困るんだな・・。
 
 

$(window).load(
	function() {
		var dfd = $.Deferred();
	・・・

 

ポイント2

load中画面の作り方

CSS

#loadingWrap{
	width: 100%;
	height: 100%;
	top: 0px;  #余白0指定しないとブラウザ標準余白に(chromeは8px)
	left: 0px;
	position: fixed;
	background: white; #背景色を指定しないと透過しちゃうよ
	text-align: center;
}

 
■HTML
シンプルに・・・。

<div id='loadingWrap'><br/><br/><br/>Just a moment, please</div>

 

ポイント3

'load中'画面はすぐに削除

今回のアニメではコンテンツを非表示にして、最後にfadeInして見せる仕掛け。

ローディング画面を残したままにしておくと、
fadeIn前のわずかな瞬間にローディング画面が一瞬表示されてしまう。
初回表示時しか使わないのだから、アニメが始まったら早々に要素を消しておく。

var dfd = $.Deferred();
dfd.then(
	function(){
		$("#loadingWrap").remove();
	・・・

 

SCSS⇒CSSの変換コマンド

なかば作業メモだけど・・。
空白に注意

sass --style expanded main.scss:main.css

 

SCSS⇒CSS自動変換コマンド

sass --style expanded --watch main.scss:main.css


ソースはGitHubにおいてます。
https://github.com/sekaiya/isee-tomoe

 
石井さんは本当に絵が上手いんだ。
一緒に展覧会に行くと色々解説してくれて楽しいよ。