CSS05 · כניסת Blur-In

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* CSS05 · כניסת Blur-In */
.blurin{opacity:0}
.blurin.in{opacity:1;animation:blurIn .9s cubic-bezier(.2,.6,.2,1) both}
@keyframes blurIn{from{filter:blur(14px);opacity:0;scale:.97}to{filter:blur(0);opacity:1;scale:1}}
.blurin.ph{width:min(560px,80vw);height:300px;margin-inline:auto;font-size:22px}
@media(prefers-reduced-motion:reduce){.blurin{opacity:1;animation:none}}

HTML

<div class="stage"><div class="blurin ph ph-c"><span class="ph-l">נכנס מטושטש, מתחדד</span></div></div>

JS

const io=new IntersectionObserver(es=>es.forEach(e=>{
  if(e.isIntersecting){e.target.classList.add("in");io.unobserve(e.target)}
}),{threshold:.3});
document.querySelectorAll(".blurin").forEach(el=>io.observe(el));