粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード

最近、Corey GinnivanのWebサイトで魅惑的なデザイン要素を発見しました。スクロール中に動的に再配置するカードのスタックです。

最初は、これには広範なJavaScriptが必要になると思いました。しかし、私はすぐにエレガントなソリューションがposition: stickyとサスのタッチ。 Coreyのアプローチを複製する代わりに、独自のバージョンを作成することにしました。

まず、基本的なカードスタイルを定義しましょう。

体 {
  背景：線形勾配（＃e8e8e8、＃e0e0e0）;
}

.wrapper {
  マージン：0 Auto;
  最大幅：700px;
}

.card {
  バックグラウンドカラー：#fff;
  ボーダー：1pxソリッド#ccc;
  ボーダーラジウス：10px;
  Box-Shadow：5PX 5PX 5PX RGBA（0、0、0、0.1）;
  色：＃333;
  パディング：40px;
}

スティッキー効果を達成するために、 position: stickyを適用します。

 .card {
  位置：粘着性;
  トップ：10px;
  / *その他のカードスタイル */
}

これにより、最初の粘着性の動作が作成されます。積み重ねられた効果をシミュレートするために、SASSの@forループを活用してください。

 @for $ i 1〜8 {
  .card：nth-​​child（＃{$ i} n）{
    トップ：$ i * 20px;
  }
}

このループは、各カードのtopプロパティを調整し、スタッキングの錯覚を作成します。

このアプローチは、視覚的に魅力的な結果を生み出します。さらなる改良には、ボックスシャドウとカードの色を調整して、美学を強化することが含まれます。

ただし、代替レイアウトを探索したかったのです。このウェブサイトの別のデザインに触発されて、私はFlexBoxを使用して水平方向の配置を実験しました。

 .wrapper {
  ディスプレイ：Flex;
  オーバーフローX：スクロール;
}

.card {
  高さ：60VH;
  最小幅：50VW;
  位置：粘着性;
  上：5VH;
  左：10VW;
}

動的でランダム化された要素を追加するために、SASSのrandom()関数をループに組み込みました。

 @for $ i 1〜8 {
  .card：nth-​​child（＃{$ i} n）{
    左：$ i * 20pxランダム（200） * 1px;
    TOP：$ i * 1pxランダム（130） * 1px;
    変換：回転（ランダム（3）-2 * 1DEG）;
  }
}

この変更により、各カードにランダムなオフセットと回転が導入され、より遊び心のあるダイナミックなプレゼンテーションが行われます。

position: sticky 、これらの例で明確に実証されています。

以上が粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。