2

ある種の「視差効果」を得るために、overflow:hidden を使用して別の div 内に画像を再配置する必要がありますが、ここで「position:fixed」を使用するオプションはありません。 :hidden" 親...だから私は JS (jQuery) でこれを行う必要があります。

Firefox ではすべて正常に見えますが、Webkit ベースのブラウザーと IE9 では背景画像 (犬) がちらつきます。この jsfiddle の例を見てください: http://jsfiddle.net/7J5AM/1/

この問題を回避する方法はありますか? Spotify は同じ効果を使用します: https://www.spotify.com/uk/が、2 つの要素を使用してこの効果を実行します。1 つ目は Keyvisual-Image の単なるプレースホルダーで、2 つ目は実際のその中の画像。

私の例では、後で CMS (Typo3) を使用する必要があるため、これは不可能です。各 Keyvisual を 2 回 (プレースホルダー + 画像) 配置することはできません。 .

このちらつきを回避する方法はありますか？

編集：レスポンシブデザインの目的で画像のサイズを変更する必要があるため、画像を背景画像として使用することもできません...

スクリプトの重要な部分は次のとおりです。

var win_h = jQuery(window).height();
var scroll_top = jQuery(document).scrollTop();
var kv_pos = jQuery(this).parent().offset();

if(parseFloat(kv_pos.top) < (win_h + scroll_top)) {
    var new_top = (((scroll_top - kv_pos.top + 90) / 100) * 60);
    jQuery(this).css('top',new_top);
}
4

1 に答える 1

2

position:absolute でこれを行う方法はないようです。問題は、Webkit と IE のエンジンが、スクロール中に position:absolute Element の新しいビューポート位置を設定することです。新しい位置を計算して設定した後、jQuery(window).scroll がジャンプして、position:absolute Element の新しい/その他の位置を設定します。そのため、ピクセルごとにスクロールすると (Mac の Magic Mouse など)、jQuery がマジックを実行する前に毎回、ブラウザ エンジン自体が新しい位置を設定します。これにより、ちらつきが発生します。

Elements を position:fixed に設定した場合のみ、ブラウザはそれらの位置に触れません...

これを回避する私の方法は次のとおりです。 document.ready の後、Keyvisuals を visibility:hidden に設定し、本文タグの直後にコンテンツをコピーします。次に、これらすべてのコピーは位置: 固定され、現在行っていることは、高さと上部の値を「非表示のプレースホルダー」に応じた値に設定することです-Spotify と同じです。

于 2013-05-02T08:29:00.827 に答える