1

ここでフィドル- 目標は、スクロール時にバックグラウンドでパースペクティブ効果を作ることです。

Chrome、IE7、IE8 では問題なく動作しますが、次の点に注意してください。

IE9 では奇妙に動作します (背景は前に位置をリセットしますanimation) Mozilla と Opera では動作しません (スクロールは機能しますが、背景の位置は機能しません)

マウスホイールイベントが発生したときにページのスクロールをアニメーション化し、背景の位置をアニメーション化して、体がスクロールするよりも少しだけ動くようにします。これにより、遠近感が得られます

4

1 に答える 1

1

IE9 (および Mozilla など) の問題を解決するには、「background-position-x」から「-x」を削除します。標準仕様の一部ではないため、最新のブラウザーでは使用されなくなりました。jQuery の animate メソッドで背景の位置を変更する場合は、X 属性と Y 属性の両方を含める必要があります。

$('div').animate({'background-position':'0px 50px'});
-OR-
$('div').animate({'background-position':'50px 0px'});

background-position-xとbackground-position-yは、Microsoft が以前のバージョンの IE で実装した css 要素です。Google の人々はこのアイデアを気に入り、採用しました。Chromeでも属性を分割できると思いますが、私はそれを当てにはしません:)最後に、これは「当てにならない」シナリオに沿っており、「px」を含める必要はありません寸法。一部の要素では値がゼロの場合は必要ありませんが、一部のブラウザーでは JavaScript で必要なようです。

于 2013-01-08T01:37:01.960 に答える