こちらのウェブサイトさんについて

質問

こちらの園芸のサイトさん
http://kaenjusai.jp
に入ると、呼び方は解りませんが、画像と文字だけのページがワンクッション入って、クリックするかスクロールするとメインのページに移動します。移動後はスクロールしても戻らなくなっています。
これはどのような仕組みになっているのか、解る方はいらっしゃいますでしょうか？
ソースを覗いてみましたが、いかんせん素人なのでjQueryなのかCSSなのか、はたまた別の仕組みなのか分かりませんでした。

回答No.1

int3

>jQueryなのかCSSなのか、はたまた別の仕組みなのか分かりませんでした。
両方ですけど難しいことはしてないようです。

htmlの構造的にはopening（スクロール前)/main(スクロール後)を最初からだしている
ただ、openingのほうはz-index等でmainより前に表示されるようにしている
<div id="wrapper">
<div id="opening">
<div id="main">
</div>

スクロールのクリック後は、index.jsにかいてある以下の処理でtop: -100%, z-index: -1にして見えないようにしているだけです。
$main = $("#main");
$opening = $("#opening");

//Button
$('#opening dl').click(function() {

$opening.animate({ "top" : "-100%" }, 900, function() {
$('#sidebar nav').css('position', 'absolute');
$('#main').css('position', 'relative');
});

$main.animate({ "top" : "0%" }, 900, function() {

$('#sidebar nav').css('position', 'fixed');
$('header').css('position', 'fixed');

$('#opening dl').css('display', 'none');
$('#opening').css('zIndex', -1);

});

return false;
});