CSSで気の利いたNetflixアニメーションを再作成する方法

Netflixブラウジングページの設計は、長年にわたって高度な一貫性を維持しています。主なコンポーネントの1つはプレビュースライダーです。これにより、ユーザーはコンテンツをスクロールしてプロジェクト上でホバリングしてプレビューを表示できます。

このUIのユニークな機能の1つは、ホバー動作です。ショープレビューがホバーで拡張されると、その隣のカードが外側に押して、オーバーラップを避けます。

このような：

CSSでこの効果を達成できます！ JavaScriptは不要、依存関係は必要ありません。純粋なCSSを実行できます。しかし、コードを入力する前に、私たちが達成したいことを明確にしましょう。

1. ホバリングカードは、アスペクト比を維持しながら拡張する必要があります。
2. 1枚のカードがhoverくると、他のカードはサイズを変更せず、互いに重複しないように外側に移動する必要があります。
3. すべてのカードは、互いに垂直に集中する必要があります。

いいですね？次に、コードセクションに行きましょう。

HTMLおよび弾性要素

Netflixのビデオプレビューを表すために、画像の行を設定しましょう。これには次のものが含まれます。

• a .containerparent要素.item含む
• 各.item要素には、アンカータグでラップされた画像が含まれています
• .containerをフレックスコンテナに変換して、アイテムを連続して調整します
• .itemクラスのフレックス動作を設定して、列の等しいスペースを占めるように設定します

ホバリング中にアイテムを拡張します

次のステップは、プロジェクトをホバーで展開することです。これをアニメーション要素の幅で行うことができますが、これはドキュメントの流れに影響を与え、ホバリングアイテムの兄弟要素が縮小する可能性があります。

ホバープロジェクトの兄弟要素を絞ることを避けるために、 transformプロパティ（特にscale()関数）をアニメーション化します。これは、幅ほどドキュメントフローに影響しません。

兄弟の要素を外側に移動します

ホバープロジェクトをホバープロジェクトから遠ざけることは、プロセスの最も難しい部分です。使用できるCSS機能の1つは、ユニバーサル兄弟の組み合わせです。これにより、ホバープロジェクトの背後にあるすべての兄弟プロジェクトを選択できます。

transform PropertyのtranslateX()関数に目を向けて、要素を移動します。同様に、 transformのアニメーションは、マージンやパディングなど、ドキュメントの流れに影響を与える他のプロパティよりもはるかに優れています。

ホバーで150％をズームインするようにアイテムを設定したため、パンは25％に設定する必要があります。これは、ホバープロジェクトが占める余分なスペースの半分です。

 <code>.item:hover ~ .item { transform: translateX(25%); }</code>

これにより、要素を右に移動することができますが、要素を左にどのように供給しますか？ユニバーサル兄弟コンビナーは、特定のセレクターの背後にある兄弟要素にのみ適しているため、別のアプローチが必要です。

1つの方法は、親コンテナ自体に追加のホバールールを追加することです。これが計画です：

• 親コンテナをホバリングするときは、親コンテナ内のすべてのアイテムを左に移動します。
• ユニバーサルブラザーコンビネーターを使用して、ホバーアイテムの背後にあるアイテムを右側に移動します。
• 操作は、ホバーアイテムが他のアイテムのようにパンされないようにするために非常に具体的です。

ドキュメントが左から右へのライティングモードを使用していると仮定しましょう。この効果を右から左にコンテキストで使用する場合は、ホバーアウター容器内のすべてのアイテムを右に移動し、ユニバーサル兄弟コンバイナーを使用して選択したすべてのアイテムを左に移動する必要があります。

デモ時間！

注意すべきことの1つは、最終バージョンが次の:focusと:focus-withinキーボードナビゲーションをサポートすることです。 Netflixの例はそれを使用していませんが、これはアクセシビリティへの良い追加だと思います。

それでおしまい！はい、CSS Hoverルールの代わりにJavaScriptイベントリスナーを使用できます。これは、メンテナンスと読みやすさをより助長する場合があります。しかし、CSSがどれだけ私たちを連れて行くことができるかを見るのも楽しいことです！

以上がCSSで気の利いたNetflixアニメーションを再作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。