ちょっとしたヒント: 視差スクロール効果を実現するための純粋な CSS_html/css_WEB-ITnose

1. まずはエフェクトのデモ〜

視差スクロールエフェクトについては聞いたことがあるかもしれませんが、これは基本的に JS によって実装されており、対応するプラグイン - Parallax.js があります。高い互換性を要求する場合、たとえば、IE ブラウザを無視して、数行の単純な CSS コードを使用して視差スクロール効果を実現できます。

効果の表示については、次のように、最初に効果を確認することが最も興味深く、学習意欲を刺激します (IE9+):

ここをクリックできます: 視差スクロール効果のデモは純粋な CSS で実装されています

デモのスクロール スクロール バーに入りますマウスをゆっくりドラッグすると、携帯電話の画像の上を飛んでいる絵文字や花などの小さなアイコンの視差感がより顕著になります。現在、Chrome、FireFoxなどのブラウザ（IE11を含むブラウザを除く）が有効です。

2. CSS 実装の原理

原理は非常に単純です。次の主要な CSS ステートメントが役割を果たします (赤色で強調表示された部分):

.container {    /* 滚动容器 */    perspective: 1px;     padding: 0; height: calc(100vh - 300px); overflow: auto;}.box {    /* 视差元素的父级需要3D视角 */    height: 1280px;    transform-style: preserve-3d;    position: relative;}.background {    /* 滚动比较慢的背景元素 */    position: absolute; left: 50%;    transform: translate3D(-50%, -120px, -1px) scale(2);}

上の赤色で強調表示されたコードに 1px が表示されていることがわかります。 )、-1px (transform から)、scale(2) の 2 これらの数値の間にはどのような関係がありますか?

まず、以下の 3D 透視図を見てみましょう (ここから):

画面の前に 1 単位いて、画面の 1 単位後ろの要素を見るとき、裸で見える画像のサイズ目は実際のサイズのわずか 1/1 2、いわゆる近くが大きく、遠くが小さいです。このとき、scale(2) はコンテンツを元のサイズの 2 倍に拡大し、平面上で元のサイズのように見えるようにします。

肉眼で見る体積は1:1に見えますが、転がる時の変位変化は1:2のままなのでわかりやすいと思います。極端な例を挙げると、私たちはバッテリーカーに座って空の月を眺めていますが、車は40ヤードの速度で走っていますが、月の位置は常に私たちの真上にあるように見えます。頭。 Web ページの 3D は現実世界の 3D 効果をシミュレートするものであるため、この視差体験も発生します。

言い換えると、CSS3 3D の自然な視差効果であるスクロールは、視差発現のトリガー条件にすぎません。

それでは、親愛なるクラスメートの皆さん。 3 層の視差スクロールを実装したい場合はどうすればよいでしょうか?非常に簡単なので、translateZ(-2px)~

を試してみてください。

3. 結論

私のテストによると、直接本文や HTML スクロールで視差スクロール効果を実現するのは難しいようですが、遅くなってしまったので実行しませんでした。興味があれば、詳細を確認して、友達が調べて共有できます。

OK、豪華で驚くべき手品のように、解読すると、それが何でもないことがわかります。 CSS 視差スクロールの秘密を解明することに成功しましたか?

読んでいただきありがとうございます。コミュニケーションを歓迎します!

この記事はオリジナルの記事であり、ナレッジポイントは頻繁に更新され、いくつかの間違いが修正されます。そのため、トレーサビリティを容易にし、古い知識や間違った知識による誤解を避けるために、元のソースを保持してください。 。

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=4720