B22 · סקשן וידאו שמתנגן רק כשרואים אותו

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}
.center{text-align:center}

/* B22 · סקשן וידאו שמתנגן רק כשרואים אותו */
.vsec{position:relative;min-height:min(88vh,780px);overflow:hidden;display:grid;place-items:center;background:#0f1020}
.vsec video,.vsec .vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vsec video{opacity:0;transition:opacity .6s ease}
.vsec.playing video{opacity:1}
.vsec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
.vsec-in{position:relative;z-index:2;text-align:center;color:#fff;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.vsec-in h3{font-size:clamp(30px,4vw,66px);margin:0 0 12px;font-weight:800}
.vsec-in p{margin:0 auto;max-width:44ch;font-size:17px;opacity:.85}
.vstate{position:absolute;bottom:16px;inset-inline-end:20px;z-index:3;font-size:12px;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.45);border-radius:999px;padding:6px 14px}

HTML

<div class="stage tight center" style="color:var(--muted)">גלול למטה. הסרטון יורד לרשת רק כשהסקשן מתקרב.</div>
<section class="vsec">
  <img class="vposter" src="https://liavwebdesign-spec.github.io/motion-vault/assets/media/demo-b.jpg" alt="">
  <video muted loop playsinline preload="none" poster="https://liavwebdesign-spec.github.io/motion-vault/assets/media/demo-b.jpg" data-src="https://liavwebdesign-spec.github.io/motion-vault/assets/media/demo-b.mp4"></video>
  <div class="vsec-in"><h3>שקט שאפשר להרגיש</h3><p>הווידאו מתנגן רק כשהוא באמת מול העיניים, ונעצר ברגע שהוא יוצא מהמסך.</p></div>
  <span class="vstate">ממתין</span>
</section>
<div class="stage center" style="color:var(--muted);min-height:120vh;display:grid;place-items:center">המשך לגלול, והסרטון ייעצר מאחוריך. גלול חזרה למעלה והוא יחזור לנגן.</div>

JS

(function(){
  const sec=document.querySelector(".vsec"),v=sec.querySelector("video"),state=sec.querySelector(".vstate");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  let loaded=false;
  const set=t=>state.textContent=t;
  if(reduce){set("מושהה: העדפת תנועה מופחתת");return;}
  const io=new IntersectionObserver(entries=>{
    entries.forEach(e=>{
      if(e.isIntersecting){
        if(!loaded){v.src=v.dataset.src;loaded=true;set("טוען");}
        const p=v.play();
        if(p&&p.then)p.then(()=>{sec.classList.add("playing");set("מתנגן");}).catch(()=>set("הדפדפן חסם ניגון"));
      }else{
        v.pause();sec.classList.remove("playing");set("מושהה");
      }
    });
  },{threshold:.35});
  io.observe(sec);
})();