带有粘性定位的堆叠卡和一点点的杂物

最近，我在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中文网其他相关文章！