[jQuery]アクセス時に全画面表示、スクロールによって非表示にする方法

Question

サイトアクセス時に全画面表示の画像を表示させ
スクロールによって上に上がっていき
非表示にさせる方法、参考サイトご存知の方
ご教授お願い致します。

動き参考サイト
http://www.spicebox.co.jp/fresh/

こちらのサイトのアクセス時に全画面
スクロールした際にnoneにする方法を探しておりますが
全画面スクロールまでいけど、そのあとnoneにするという動きの
実装方法を見つけられずにおります。

何卒よろしくお願い致します。

Answer 1

ウィンドウのサイズを取得し
後はほぼ、お教えいただいた内容で作ることが出来ました。
後々cssでフルサイズで画像を引いたほうが簡単だったのではないかと気づきましたが。

しかし一定の動きに面白みがないとなっとくはいかないようでしたので
プラグインを仕込み（jquery.easing.1.3.js）イージングを加えました。
easing: "easeOutCirc",

ありがとうございました。

Answer 2

スクロールしたら画像が上へ消えていくという動作だけなら、以下のようにしてはどうでしょう。

$(window).on("scroll", function(e){
    var imgEle = $("画像を示すセレクタ");
    var imgHeight = imgEle.height();
    imgEle.animate({position:"absolute", top:"-" + imgHeight + "px"});
});

画像には以下のcssが適用されているものとしています。

画像のセレクタ {
       position:fixed;
       top:0px;
       left:0px;
}

javascriptで画像をposition:absoluteに設定しているのは念のためです。

Comments

[eko1789]

事故解決をしてしまうとベストアンサーを選ぶことができないと
知らずに事故解決を選択してしまいました。
とても助かりました。ありがとうございます。