帶有粘性定位的堆疊卡和一點點的雜物

最近，我在Corey Ginnivan的網站上發現了一個迷人的設計元素：一堆卡片，它們在您滾動時會動態重新定位。

最初，我認為這需要廣泛的JavaScript。但是，我很快意識到了優雅的解決方案就position: sticky和淡淡的雜種。我決定創建自己的版本，而不是複制Corey的方法。

首先，讓我們定義基本卡樣式：

身體 {
  背景：線性級別（＃e8e8e8，＃e0e0e0）;
}

.wrapper {
  保證金：0自動；
  最大寬度：700px;
}

。卡片 {
  背景色：#FFF;
  邊界：1PX實心#CCC;
  邊界拉迪烏斯：10px;
  盒子陰影：5PX 5PX 5PX RGBA（0，0，0，0.1）;
  顏色：＃333;
  填充：40px;
}

為了達到粘性效果，我們應用position: sticky並設置一個頂部偏移：

 。卡片 {
  位置：粘性；
  頂部：10px;
  / *其他卡樣式 */
}

這會產生最初的粘性行為。為了模擬堆疊效果，我們利用Sass的@for循環：

 @for $ i從1到8 {
  .card：nth-​​child（＃{$ i} n）{
    頂部：$ i * 20px;
  }
}

此循環調節每張卡的top屬性，從而產生堆疊幻覺。

這種方法產生了視覺上吸引人的結果。進一步的細化可能包括調整盒子陰影和卡顏色，以增強美學。

但是，我想探索其他佈局。受此網站上另一種設計的啟發，我使用Flexbox進行了水平佈置：

 .wrapper {
  顯示：Flex;
  溢出X：滾動；
}

。卡片 {
  身高：60VH；
  最小寬度：50VW;
  位置：粘性；
  頂部：5VH;
  左：10VW;
}

為了添加動態的隨機元素，我將SASS的random()函數合併到循環中：

 @for $ i從1到8 {
  .card：nth-​​child（＃{$ i} n）{
    左：$ i * 20px Random（200） * 1px;
    top：$ i * 1px Random（130） * 1px;
    變換：旋轉（隨機（3）-2 * 1DEG）;
  }
}

此修改將隨機偏移和旋轉引入每個卡，從而產生更有趣和動態的呈現。

這些示例中清楚地證明了position: sticky 。

以上是帶有粘性定位的堆疊卡和一點點的雜物的詳細內容。更多資訊請關注PHP中文網其他相關文章！