jquery - apple.com/ipod-nano から画像のスライドイン効果を再現する方法

Question

Apple の Web サイトで素敵なスライドイン効果があることに気付きました。ページを下にスクロールすると、画像が表示されます (スライドして表示されます)。http://www.apple.com/ipod-nano

関連する主要なスクリプトを分離しようとしています。nano pageコードをdreamweaverに取り込んで調査しました。CSS 修飾子onscrollと組み合わせたカスタム Javascript イベントのようです。-webkit-

問題は、リンクされたファイルが非常に多いため.js、混乱を切り抜けて関連するキーコードを確認するのに苦労していることです。滑らかさと細かなディテールに気を配っているだけだと確信している多くのリンクされたページがあります.

この機能を再現するにはどうすればよいですか? どんなヒントでも大歓迎です。

score 0 · Accepted Answer

jQuery でこれを行う最も簡単な方法は、を使用してウィンドウのスクロール位置を追跡し、を使用.scrollTop()して DOM 要素の位置と比較すること.offset().topです。

それらが等しい場合、DOM 要素はブラウザーウィンドウの上部に達しています。または、一定数のピクセルを追加したり$(window).height()、視野に入ってきたときに検出したりできます。

http://jsfiddle.net/mblase75/LtMgP/ -- ページをスクロールして、ページの途中で黒から青に切り替わる「マーカー」という単語を探します。コード：

$(window).on('scroll', function() {
    if ($(window).scrollTop() > $('p').offset().top-100) {
        $('p').css('color','blue'); 
    };
});

1 に答える 1