<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";
}
}
}
});
