JavaScript_Experience交換を必要としない自動スクロール視差効果

このエフェクトは Chris Coyier の視差チュートリアルをモデルにしており、星空の背景は Chris の許可を得て使用されています。

ランニング効果:
ここでご覧ください: http ://www.fofronline.com/experiments/parallax/#experiment
この効果は、Safari 4 Beta および Google Chrome で通常どおりプレビューできます。この効果を実現するために JavaScript は必要ありません。
(ただしIE7以下では閲覧できません)

実装方法:
このページの HTML コードこれは非常に簡単です。1 つの div は背景の定義に使用され、別の div はコンテンツの定義に使用されます。ここでは CSS3 の複数の背景テクノロジーが使用されているため、他の背景画像を表すには追加のタグが必要です。

CSS 背景コンテナを固定位置に設定し、top、left、bottom、right プロパティを使用してページの下部を占めるようにします。背景画像は、background 属性によって指定され、トップレベルの背景が最初に指定されます。各画像はパーセンテージに従って配置され、その位置が異なるため、コンテナのサイズが変化すると各画像が移動し、視差効果が生じます。

通常の考え方によると、ページがズームされているか、JavaScript Produce を使用して制御されている場合にのみ実行できます。アニメーション効果。ここでは別の方法が使用されます。背景画像コンテナの左端を移動します (例: 0px から 100px)。これにより、コンテナの全体的な幅が変化し、背景画像がその割合に応じて異なる動きをします。継続時間と左位置を十分に大きく設定すると、連続的な視差移動効果が得られます。

移動速度を上げて、より興味深い効果を得ることができます。また、いくつかのマウス アクションを追加することもできます。最終的な CSS コードは次のとおりです。

簡単な情報: 視差効果はもともと天文学の用語であり、星空を観察すると、遠くにある星の動きは遅くなり、近くにある星の動きは速くなります。私たちも車に座って窓の外を眺めていると、遠くの山々は動いていないように見えますが、近くの田んぼはあっという間に過ぎ去っていくのを感じます。視差効果は、シーンに 3 次元の感覚を追加するために多くのゲームで使用されています。 （翻訳/曹思佳）