About this snippet

Create a trendy scrolling presentation where cards stick to the top of the viewport and stack on top of each other. This effect adds depth to your content and is achieved purely with CSS `position: sticky`.

Size
1.9 KB
Uses
HTML, CSS
Loads
Nothing external
Views
598

Collections

Related snippets

<div class="stack-container">
  <div class="header-section">
    <h1>Our Features</h1>
    <p>Scroll down to see them stack.</p>
  </div>
  
  <div class="card stack-card" style="--index: 1;">
    <div class="card-body">
      <h2>Analytics</h2>
      <p>Real-time data at your fingertips.</p>
    </div>
  </div>
  
  <div class="card stack-card" style="--index: 2;">
    <div class="card-body">
      <h2>Automation</h2>
      <p>Save time with smart workflows.</p>
    </div>
  </div>
  
  <div class="card stack-card" style="--index: 3;">
    <div class="card-body">
      <h2>Security</h2>
      <p>Enterprise-grade protection.</p>
    </div>
  </div>
  
  <div class="card stack-card" style="--index: 4;">
    <div class="card-body">
      <h2>Support</h2>
      <p>24/7 dedicated assistance.</p>
    </div>
  </div>
</div>
* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #f1f5f9;
  padding-bottom: 100px;
}

.stack-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card {
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  /* The Sticky Magic */
  position: sticky;
  top: 100px; 
  /* Dynamic spacing based on index */
  top: calc(100px + (var(--index) * 20px));
}

/* Colors for visual distinction */
.card:nth-child(2) { background: #3b82f6; color: white; }
.card:nth-child(3) { background: #8b5cf6; color: white; }
.card:nth-child(4) { background: #ec4899; color: white; }
.card:nth-child(5) { background: #10b981; color: white; }

h1 { margin: 0 0 10px; font-size: 2.5rem; }
p { font-size: 1.1rem; opacity: 0.9; }
h2 { margin: 0 0 10px; font-size: 2rem; }

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save