Stacked Cards Scroll Animation

A smooth vertical scroll effect where cards stick to the top and stack over each other, creating a depth effect as previous cards scale down. Designed with a clean, light theme.

Create a premium scrolling experience where content cards stack on top of each other as the user scrolls down. This effect uses position: sticky combined with JavaScript-driven scaling to create depth and focus.

HTML Structure

The structure relies on a scrollable container (or the main body) and card wrappers that act as sticky boundaries.

<div class="stack-container">
  <div class="card-wrapper">
    <div class="card">
      <h2>Card Title 1</h2>
      <p>Content goes here...</p>
    </div>
  </div>
  <div class="card-wrapper">
    <div class="card">
      <h2>Card Title 2</h2>
      <p>Content goes here...</p>
    </div>
  </div>
  <!-- More cards... -->
</div>

CSS Styling

We use a light theme with soft shadows and rounded corners. The sticky positioning handles the stacking behavior naturally.

:root {
  --bg-color: #f3f4f6;
  --card-bg: #ffffff;
  --text-main: #1f2937;
}

.card-wrapper {
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  width: 90%;
  max-width: 800px;
  height: 60vh;
  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transform-origin: center top;
  transition: transform 0.1s linear;
}

JavaScript Logic

The script observes the scroll position to subtly scale down the cards that are “stuck” at the top, creating the visual effect that they are being pushed back into the stack.

// Logic to scale cards based on their stack position
const cards = document.querySelectorAll('.card');
window.addEventListener('scroll', () => {
  cards.forEach((card, index) => {
    // Calculate distance from top and apply scale/opacity
  });
});