0

開発中のサイトに基本的な視差効果を導入しました。Chrome、Firefox、IE9でスムーズに動作します。しかし、IE7とIE8では本当にぎくしゃくしています。私ははるかに複雑なサイトを見てきましたが、私が得ている「ぎくしゃくした」ようなものは見当たりません。スキャンラインテクスチャが上にある2つの画像のみを使用しています。

これを引き起こしている可能性のあるアイデアはありますか？

#intro {
    background: url(../img/graphics/top-bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1024px;
    min-height: 768px;
    height: 100%;
    position: relative;
}

#second {
    background: url(../img/graphics/content-bg-2.jpg) center no-repeat fixed;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-width: 1200px;
    min-height: 768px;
    height: 4800px;
}

助けてくれてありがとう。

4

2 に答える 2

0

この設定を確認してください (コメントで) Javascript によるブラウザのスムーズ スクロールのサポートを確認するにはどうすればよいですか? .

無効になっている場合 - それは正常です。

私が理解しているように、このhttp://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/は例であり、コードではありません。また、スムーズスクロールが無効になっている場合、「ぎくしゃく」効果があります（Chrome、Opera、IE8でスムーズスクロールを無効にしました）。

スクロール原理の理由。この設定を無効にすると、永続的な +100pxのように機能します。有効にすると、50ms ごとに +10px ごとに 10 回のように動作します。

アップデート

パフォーマンスを向上させるには、次のことを実行できます。

  • プラグインなしで独自のコードを書く

  • すべてのスクロール呼び出しではなく、現在の scrollTop 間隔に基づいてイベント呼び出しを構築します

  • 最初に jquery ノードをキャッシュする

  • 主な原則 - ノード操作が少ない = パフォーマンスが向上

私はjqueryで同様の効果を書いています - あなたはここでそれを見ることができますhttp://www.thecommoditycode.com/ambersoftware/そしてそれを原則として使用してください

于 2012-07-29T12:47:37.230 に答える
-1

これに答えるのが少し遅いことは知っていますが、将来人々を助けるかもしれません-問題は、あなたが使用していることです:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

視差の背後にある画像をフルスクリーンにするには、別の方法を使用する必要があります。

このコードを削除すると、視差が美しく滑らかになります。

于 2013-04-17T23:31:40.407 に答える