Odsłanianie przy scrollu: wyostrzenie w kadrze

Gotowy kod: Odsłanianie przy scrollu: wyostrzenie w kadrze

HTML

<div class="effect scroll-demo"><div class="scroll-intro"><h2>Odsłanianie przy scrollu</h2><p>Przewiń w dół wewnątrz tego okna ↓</p></div><section class="reveal-item"><small>01 / ODKRYWAJ</small><h2>Odsłanianie przy scrollu</h2><p>Ta sekcja pojawia się dopiero po wejściu w kadr.</p></section><section class="reveal-item"><small>02 / ODKRYWAJ</small><h2>Odsłanianie przy scrollu</h2><p>Ta sekcja pojawia się dopiero po wejściu w kadr.</p></section><section class="reveal-item"><small>03 / ODKRYWAJ</small><h2>Odsłanianie przy scrollu</h2><p>Ta sekcja pojawia się dopiero po wejściu w kadr.</p></section></div>

CSS

*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}body{display:block;padding:0}.effect{max-width:none}.scroll-intro,.reveal-item{min-height:80vh;padding:45px 25px;display:flex;flex-direction:column;justify-content:center;align-items:center}.reveal-item{background:#e95b3011;margin:30px 20px;border-radius:12px;transition:opacity 1200ms ease,transform 1200ms,filter 1200ms,clip-path 1200ms}.reveal-item small{font:10px monospace;letter-spacing:2px;margin-bottom:22px}.reveal-item.waiting{opacity:0;transform:none;filter:blur(12px);clip-path:inset(0)}.reveal-item.visible{opacity:1;transform:none;filter:none;clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}

JavaScript

if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
    const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('visible');observer.unobserve(entry.target)}})},{threshold:.15});
    document.querySelectorAll('.reveal-item').forEach(item=>{item.classList.add('waiting');observer.observe(item)});
}