2

述べたように、ページの流動性に問題があり、jquery が何らかの形で関与していると思います。

以下のワンページサイトを作成しました。

http://cgeese.de/tests/Test02/

私はjsプラグインでjQueryを使用しています

  • ローカルスクロール
  • scrollto (両方とも Ariel Flesler によるもの、http://flesler.blogspot.de/ )
  • イージング (GSGD による、http ://gsgd.co.uk/sandbox/jquery/easing/ )

問題

リンクをクリックすると、バウンス イーズ (easing.js によって提供) を使用して、ページがターゲット div にスクロールされます。技術的には問題なく動作しますが、私の好みでは滑らかではありません。

イージングのスタッターの問題は、これらのプラグインの 1 つを誤用したことだと思いますが、コードの間違いを見つけることができないようです。

質問

アニメーションがカクカクするのはなぜですか? どうすればスムーズにできますか?

更新 手がかりはありますか？jQuery-build-in イージングを使用する方が少し見栄えが良いようですが、同じ問題があります。ですから、Ariel Feslers のものを残すのはイージング プラグインではないと思います。彼のようなプラグインはありますか？

4

1 に答える 1

4

クロムではかなり滑らかに見えます。イージングの種類を変えてもあまり変わらない...

あなたのナビゲーションは Position: fixed です。ナビゲーション キー フレームごとにページ全体の再描画/リフローが発生しています。クロムカナリアまたはこのトリックでこれを視覚化できます：http://paulirish.com/2011/viewing-chromes-paint-cycle/

スクロールをアニメーション化すると、再描画もトリガーされます。また、CSS3 の影とグラデーションをできる限り削除してください。ブラウザーでアニメーション化するのはかなり困難です。

Firefox用のプラグインがあると思います。

あなたはこれを最適化することができます私の設定は位置：絶対であり、オーバーフローが隠されているdiv内にコンテンツを配置します...（ある種の偽の体）

これに関する優れた記事は次のとおりです。

他にできることは、スクロールをアニメーション化するのではなく、要素自体をアニメーション化し、それらを絶対配置要素に配置して、この要素をアニメーション化することです。

再描画/リフローに関する一般的なガイドライン: https://developers.google.com/speed/articles/reflow

于 2012-04-12T08:26:23.810 に答える