CSSで視差のある複数の背景画像を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSSで視差のある複数の背景画像を作成するにはどうすればよいですか?

視差スクロールは、Web ページに動きや奥行き感を加えるためによく使用されるデザイン手法です。これは、個々のページ要素をさまざまな速度で移動させて、平面上の奥行きの効果をシミュレートすることによって行われます。このテクニックを実装するユニークで想像力豊かな方法は、CSS で複数の背景画像を利用することです。この記事では、HTML 構造と CSS スタイルの設定に必要な手順を含め、CSS で複数の背景画像を使用して視差効果を作成する方法を説明します。初心者でも経験豊富なフロントエンド開発者でも、このガイドでは、素晴らしい複数の背景画像の視差効果を作成するために必要な知識とツールを提供します。

＃＃＃文法＃＃＃リーリー

背景画像のプロパティ

CSS のbackground-image 属性は、HTML 要素の背景として 1 つ以上の画像を指定するために使用されます。これにより、要素の基礎として 1 つ以上の画像を組み合わせることができます。画像は要素の特定の領域に配置したり、水平または垂直にコピーするように設定したり、要素全体または一部だけをカバーするようにサイズ変更したりできます。

リーリー

アニメーションのプロパティ

CSS アニメーションプロパティを使用すると、JavaScript を使用せずに HTML 要素にアニメーションを作成できます。このプロパティを使用すると、特定の期間にわたる要素の変更中のキーフレームのシーケンスを記述することができます。これらのキーフレームは、さまざまな時点での要素のスタイルを表すために使用され、アニメーションプロパティは、要素があるキーフレームから別のキーフレームにどのように遷移するかを制御します。

以下は、アニメーションプロパティの各コンポーネントの簡潔な説明です -

Name
- @keyframes ルールで参照するために使用されるアニメーションの命名法。
Duration
- アニメーションの持続時間を秒単位で表し、時間文字列値 (「5s」など) で表します。
Timing-function
- アニメーションの速度軌跡は、線形、イーズイン、イーズアウト、イーズインとイーズアウト、またはカスタム 3 次ベジェによって制御できます。関数。
Delay
-アニメーションを開始する前の遅延。秒単位で測定されます (たとえば、「2s」)。
Iteration-count
- アニメーションが実行する反復回数。または「無限」という用語は、アニメーションが無限ループを継続することを意味します。
方向
- アニメーションの軌跡。「通常」(通常の方向)、「逆」(反対方向)、または前後を交互に繰り返す「代替」のいずれかになります。。
Fill mode
- アニメーションの非動作状態を満たす方法を指定します。オプションには、「なし」、「前方」、「後方」、または「両方」が含まれます。
Play-state
- アニメーションが動作中か一時停止中かを示し、それぞれ「実行中」または「一時停止」の値で表されます。
李> ＃＃＃方法＃＃＃

複数の背景画像を使用して CSS で視差効果を作成するには、一連の手順に従う必要があります -

環境の説明を含むコンポーネントを提供します。現在のケースでは、コンポーネントはラベル parallax-container を持つ div です。
コンテナ要素の高さと幅を定義し、オーバーフロー属性を非表示に設定します。これにより、画像の目に見える部分のみが表示されるようになります。さらに、背景画像の位置がコンテナに対して相対的であることを保証するために、position プロパティが相対に設定されます。
背景画像ごとに個別の要素を作成し、その位置を絶対配置に設定します。これにより、各画像をコンテナ要素内に正確に配置できるようになります。各要素の高さと幅は、コンテナ全体を満たすように 100% に設定されます。
background-image 属性を使用して、各要素の背景画像を設定します。個々の画像の正確なファイルパスを必ず指定してください。
各要素のアニメーションを作成して、背景画像を X 軸に沿って移動します。これは、アニメーションプロパティと @keyframes ルールを組み合わせて使用して行われます。 TranslateX プロパティは要素を移動するために使用され、このプロパティに設定した値によって要素が水平方向に移動する距離が決まります。
スムーズで連続的なアニメーションエクスペリエンスを維持するために、animation-timing-function 属性には線形値が割り当てられ、アニメーションがプロセス全体を通じて一貫した進行を維持することを示します。さらに、animation-iteration-count プロパティは無限値に構成されており、ループ数の事前定義された制限なしにアニメーションが無限に繰り返されることを示します。
Example
の翻訳は次のとおりです: