動く背景

背景画像は、多くの場合、テクスチャやコントラストを提供する単なる視覚的強化として機能します。 ただし、位置とスケールを操作すると、追加のコンテキストを伝えるインタラクティブな要素に変換できます。 この記事では、背景画像操作がユーザーエクスペリエンスを向上させるいくつかの例を調査します。 スクリーンリーダーが発表しない可能性があるため、装飾のためだけに画像を使用することにアクセシビリティの意味がある可能性があることを覚えておくことが重要です。 画像が意味のある情報を伝えている場合は、説明的なALTテキストを使用して<img alt="動く背景" >タグを使用することを検討してください。 また、ユーザーモーションの設定に優先順位を付けます

インタラクティブな背景：コンテキストの拡大

Chris Coyierのデモは、バックグラウンドイメージの動きを巧みに利用して、広告をより効果的に紹介します。 通常、広告で利用できる限られたスペースは、ホバー上のより多くの画像を明らかにし、製品のより豊かなコンテキストを提供することで克服されます。これは、広告主とユーザーの両方に利益をもたらします

HTMLは簡単です。背景画像にリンクされた

を備えたコンテナと、コンテンツを保持するもう1つのコンテナです。 CSSは背景画像を設定し、繰り返しを防ぎ、初期の位置を定義します。

魔法はJavaScriptで起こります。 容器内のマウスの動きを追跡し、オフセットを計算し、それに応じて<div>を調整します。 特定の乗数（xで1.32、yで0.455）を使用して、効果を微調整します。 マウスの休暇では、バックグラウンドの位置がリセットされます。 ホバー遷移を使用したよりシンプルなCSSのみのアプローチも可能です。 Zoom-on-Hover：詳細なビュー<p> <code>background-positionおなじみのズームオンホバー効果により、ユーザーは画像内の詳細を詳しく調べ、理解を向上させます。この手法には、コンテナと動的に生成された拡大器が含まれます。

HTMLは、単一の

コンテナで構成されています。 CSSは、コンテナの寸法、背景画像、および

を定義します。 JavaScriptを使用して、拡大鏡要素が動的に作成されます。 そのCSSは、サイズ、境界線、背景画像を定義します（コンテナをミラーリングします）。

JavaScriptはマウスの動きを処理し、拡大器の位置と背景位置を計算してズーム効果を作成します。 スクロールが考慮されます。 拡大鏡の背景サイズは、ズーム効果を実現するために乗数を使用してスケールアップされています。

映画のパンニング：ケンバーンズ効果

<div>ケンバーンズ効果は、ドキュメンタリー、微妙にパン、コンテナ内の画像で一般的に使用されています。 JavaScriptソリューションは存在しますが、CSSは微妙なスケーリング効果を達成できます。 アニメーションの遅延がずれた複数の背景は、効果を高めることができます。 最適化のためにSASSおよびCSS変数を使用することを検討してください<h3 id="没入型の背景-レイヤードアニメーション">没入型の背景：レイヤードアニメーション</h3> <p>サラ・ドラスナーの「ハッピーハロウィーン」Codepenプロジェクトは、非常に没入感のある体験を作成するために、さまざまなアニメーション速度を備えた階層化された背景の可能性を示しています。 GSAPは彼女の例で使用されていますが、単純化されたバージョンでは、バックグラウンドレイヤーをさまざまな速度で変換できます。 シームレスな繰り返しには、一貫した画像開始点とエンドポイントが必要です </p>結論として、背景画像は視覚的な魅力だけではありません。 彼らの位置、スケール、アニメーションの創造的な操作は、ユーザーの相互作用を大幅に強化し、より魅力的で有益なエクスペリエンスを提供することができます。</div>

以上が動く背景の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。