About this snippet

Create a compelling narrative with a smooth sticky section reveal. As users scroll, the full-screen sections stack cleanly on top of one another natively, entirely without JavaScript.

Size
1.6 KB
Uses
HTML, CSS
Loads
Nothing external
Views
262

Collections

Related snippets

<div class="stack-wrapper">
  
  <section class="stack-section panel-1">
    <div class="panel-content">
      <h2>Section One</h2>
      <p>Scroll down. This section will stick to the top and the next panel will slide securely over it.</p>
    </div>
  </section>
  
  <section class="stack-section panel-2">
    <div class="panel-content">
      <h2>Section Two</h2>
      <p>Pure CSS positioning doing the heavy lifting.</p>
    </div>
  </section>
  
  <section class="stack-section panel-3">
    <div class="panel-content">
      <h2>Section Three</h2>
      <p>Beautiful, performant, and incredibly simple.</p>
    </div>
  </section>
  
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #0f172a;
}

.stack-wrapper {
  position: relative;
}

.stack-section {
  /* The core magic - each section sticks to the top of the viewport */
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.3);
}

.panel-content {
  text-align: center;
  color: #ffffff;
  padding: 40px;
  max-width: 600px;
}

.panel-content h2 {
  font-size: 4rem;
  margin: 0 0 20px 0;
  letter-spacing: -2px;
}

.panel-content p {
  font-size: 1.25rem;
  color: #cbd5e1;
  line-height: 1.6;
}

.panel-1 {
  background: #0f172a;
}

.panel-2 {
  background: #1e293b;
}

.panel-3 {
  background: #334155;
}

      

          


    

    
  

  















  
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