Stacked Cards with Sticky Positioning and a Dash of Sass

Recently, I discovered a captivating design element on Corey Ginnivan's website: a stack of cards that dynamically reposition themselves as you scroll.

Initially, I assumed this would require extensive JavaScript. However, I quickly realized the elegant solution lies in position: sticky and a touch of Sass. Instead of replicating Corey's approach, I decided to create my own version.

First, let's define basic card styles:

body {
  background: linear-gradient(#e8e8e8, #e0e0e0);
}

.wrapper {
  margin: 0 auto;
  max-width: 700px;
}

.card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  color: #333;
  padding: 40px;
}

To achieve the sticky effect, we apply position: sticky and set a top offset:

.card {
  position: sticky;
  top: 10px;
  /* other card styles */
}

This creates the initial sticky behavior. To simulate the stacked effect, we leverage Sass's @for loop:

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    top: $i * 20px;
  }
}

This loop adjusts the top property for each card, creating the stacking illusion.

This approach produces a visually appealing result. Further refinements could include adjusting the box-shadow and card colors for enhanced aesthetics.

However, I wanted to explore alternative layouts. Inspired by another design on this website, I experimented with a horizontal arrangement using flexbox:

.wrapper {
  display: flex;
  overflow-x: scroll;
}

.card {
  height: 60vh;
  min-width: 50vw;
  position: sticky;
  top: 5vh;
  left: 10vw;
}

To add a dynamic, randomized element, I incorporated Sass's random() function into the loop:

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    left: $i * 20px   random(200) * 1px;
    top: $i * 1px   random(130) * 1px;
    transform: rotate(random(3) - 2 * 1deg);
  }
}

This modification introduces random offsets and rotation to each card, resulting in a more playful and dynamic presentation.

The power and flexibility of position: sticky are clearly demonstrated in these examples.

The above is the detailed content of Stacked Cards with Sticky Positioning and a Dash of Sass. For more information, please follow other related articles on the PHP Chinese website!