<div class="spacer">Scroll Down Slowly</div>

<div class="reveal-section" id="reveal-container">
  <div class="sticky-text">
    <p id="text-paragraph">
      <span>The</span> <span>future</span> <span>of</span> <span>web</span> <span>design</span> 
      <span>is</span> <span>interactive,</span> <span>engaging,</span> <span>and</span> 
      <span>highly</span> <span>optimized.</span> <span>As</span> <span>you</span> 
      <span>scroll</span> <span>down</span> <span>this</span> <span>page,</span> 
      <span>these</span> <span>words</span> <span>will</span> <span>reveal</span> 
      <span>themselves</span> <span>one</span> <span>by</span> <span>one.</span>
    </p>
  </div>
</div>

<div class="spacer">End of Reveal</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";
  background: #000000;
  color: #ffffff;
  margin: 0;
}

.spacer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #6b7280;
}

.reveal-section {
  height: 200vh;
  position: relative;
}

.sticky-text {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

#text-paragraph {
  max-width: 800px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

#text-paragraph span {
  opacity: 0.15;
  transition: opacity 0.1s;
}

const container = document.getElementById("reveal-container");
const spans = document.getElementById("text-paragraph").getElementsByTagName("span");

window.addEventListener("scroll", function() {
  const rect = container.getBoundingClientRect();
  const top = rect.top;
  const height = rect.height - window.innerHeight;
  
  // Only calculate when container is in view
  if (top <= window.innerHeight && top >= -height) {
    // Calculate progress from 0 to 1
    let progress = -top / height;
    
    // Clamp values
    if (progress < 0) progress = 0;
    if (progress > 1) progress = 1;
    
    const totalSpans = spans.length;
    
    // Update each word opacity based on scroll percentage
    for (let i = 0; i < totalSpans; i++) {
      const threshold = i / totalSpans;
      if (progress > threshold) {
        spans.item(i).style.opacity = "1";
      } else {
        spans.item(i).style.opacity = "0.15";
      }
    }
  }
});

Back to Snippets

Sticky Text Scroll Reveal Effect JS

Highlight your best features with a sticky text scroll reveal. We fade in the words smoothly as you scroll down, and this Apple-style effect keeps users reading.

127

#javascript

#css

#scroll animation

#text reveal

#sticky

#landing page

#typography

/HTML *CSS ()JS Output Live Updates

Sticky Text Scroll Reveal Effect JS

Share Code Snippet