0

内訳はこちら...

  • ラッパー (位置: 相対; オーバーフロー: 非表示; )
    • セクションコンテナ (位置:絶対)
      • 複数の子セクション

マウスホイール イベント リスナーをアタッチし、「section-container」の「トップ」位置を (イージングで) アニメーション化します。この位置が変化すると、各セクションの「background-position」は、「section-container」の「top」プロパティの位置に基づいて垂直方向に移動します (setTimeout() によって継続的に更新されます)。

「背景位置」の変更を除いて、すべてが正常に機能し、画像に少しジッターがあります。「background-attachment」が「fixed」に設定されている場合、これは起こりません...しかし、私はそれを望んでいません。

誰でもこれを説明できますか? 私は継続的にhttps://victoriabeckham.landrover.com/サイトを参照していますが、効率的に運用するために彼らが何を異なって行っているのか理解できません。

4

3 に答える 3

1

あなたはこれをチェックすることができます、私は彼らがアニメーション化のほとんどを行う場所だと信じています: https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471

彼らはこれを達成するために使用しているある種のフレームワークを持っていると言わざるを得ません。

編集：申し訳ありませんが、私の上記の新しい回答が表示されませんでした。良い出発点のようです。

-ケン

于 2012-07-25T15:12:32.740 に答える
0

Ok。そのため、「top」プロパティの「section-container」をanimate（）しようとしたときに問題が発生したことがわかりました。「+=」を使用して、現在の位置からインクリメントできるようにしました。'mousewheel'イベントを使用する場合はお勧めできません。継続的にインクリメント/デクリメントされるハードセット変数に変更しました。

于 2012-07-25T20:33:18.453 に答える
0

このウェブサイトを注意深く調べると、ランドローバー サイトのように使用できるようになります。

使用する必要があるもの: scrollTo プラグインと視差プラグイン

ドキュメント jQuery は次のようになります。

$(document).ready(function(){
    $('#nav').localScroll(800);

    //.parallax(xPosition, speedFactor, outerHeight) options:
    //xPosition - Horizontal position of the element
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
    $('#intro').parallax("50%", 0.1);
    $('#second').parallax("50%", 0.1);
    $('.bg').parallax("50%", 0.4);
    $('#third').parallax("50%", 0.3);

});
于 2012-07-25T15:09:52.793 に答える