【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>
SCSS⇒CSS自動変換コマンド
sass --style expanded --watch main.scss:main.css
ソースはGitHubにおいてます。
https://github.com/sekaiya/isee-tomoe
石井さんは本当に絵が上手いんだ。
一緒に展覧会に行くと色々解説してくれて楽しいよ。