うーんと何が不可解なのか少しつかめませんが、徒然とご回答しますね。
1.「ブラウザのサイズにかかわらず」
ブラウザの表示領域の高さをとることができます。jQueryがOKなら $(window).height() 。
だめなら innerHeight とか clientHeight とか。
2.「必ず決まった高さで表示される」
その前に、このサイトでは、画像サイズと 画像位置 が 表示領域の高さにあわせて
変化していることに気づいていますか? 当然かもしれませんが、丁寧な仕事ですね。
(これは backstretch.js を使ってるみたいです。)
で、その画像に 重ねて header部がせりあがってきています。
(半透明だったのがそうで無くなっていく(transparent設定が徐々に変わっている)ことにも注意。)
というわけで、わたしが2時間で実装しろと言われれば、
ロゴ+コンテンツ部分を 一つの divで記載して、position:absolute で、一番下に
配置して、onloadイベント 500ms 後に fadeinしつつ、110px 上に moveしますね。
jQuery で実装すればそれほど難しくないでしょう。
と思って少し見てみたら、
lang
1$(document).ready(function () {
2$('#main')
3.css({"bottom":0,"opacity":0})
4.delay(1500)
5.animate({"bottom":104,"opacity":1},750,"easeOutCirc");
6});
と書いてありました。(haikei.js)
absoluteではなく relative にしておいて、#mainの親の #page の一番下から 104px分
どっこいしょ、と持ち上げるイメージですね。
また、fadein ではなく、opacityをanimate することで実現してますね。(同じことですが)
こんな感じでどうでしょうか。
シンプルな実装で効果的な印象を与える、とてもいいページですね。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/11 10:20