B40 · פוטר שנחשף מאחורי העמוד

CSS

/* B40 · פוטר שנחשף מאחורי העמוד */
.rvf-page{position:relative;z-index:2;background:var(--bg, #f7f7fa)}
.rvf-hero{min-height:60vh;display:grid;place-items:center;text-align:center;padding:10vh var(--gutter, clamp(24px, 5vw, 96px))}
.rvf-hero h2{font-size:clamp(30px,4.4vw,66px);margin:0 0 10px;font-weight:800}
.rvf-hero p{margin:0;color:var(--muted, #6a6d85)}
.rvf-body{padding:0 var(--gutter, clamp(24px, 5vw, 96px)) clamp(60px,8vw,120px);max-width:62ch;margin-inline:auto;color:var(--muted, #6a6d85);line-height:1.8}
/* הפוטר קבוע מאחור, והעמוד מקבל שוליים בגובהו כדי לפנות לו מקום בסוף */
.rvf-footer{position:fixed;inset-inline:0;bottom:0;z-index:1;min-height:var(--rvf-h,60vh);
  background:var(--ink, #16182b);color:var(--bg, #f7f7fa);display:grid;align-content:center;gap:18px;padding:clamp(36px,5vw,70px) var(--gutter, clamp(24px, 5vw, 96px))}
.rvf-footer h3{font-size:clamp(28px,4vw,60px);margin:0;font-weight:800}
.rvf-footer a{color:var(--bg, #f7f7fa)}
.rvf-cols{display:flex;gap:clamp(20px,4vw,60px);flex-wrap:wrap;color:color-mix(in srgb,var(--bg, #f7f7fa) 62%,transparent);font-size:15px}
.rvf-cols div{display:grid;gap:8px}
.rvf-bottom{border-top:1px solid color-mix(in srgb,var(--bg, #f7f7fa) 14%,transparent);padding-top:16px;font-size:13px;color:color-mix(in srgb,var(--bg, #f7f7fa) 55%,transparent);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:767px){.rvf-footer{min-height:70vh}}

HTML

<div class="rvf-page">
  <section class="rvf-hero"><div><h2>גלול עד הסוף</h2><p>הפוטר כבר שם, מתחת לעמוד, ומתגלה כשהתוכן מחליק מעליו</p></div></section>
  <div class="rvf-body">
    <p>הטריק פשוט: הפוטר קבוע בתחתית המסך עם z-index נמוך, והעמוד יושב מעליו עם רקע אטום. כשהתוכן נגמר, מה שנשאר לראות זה הפוטר.</p>
    <p>הרווח הוא כפול: אין אנימציה שצריכה לרוץ, אין ScrollTrigger, ואין קפיצה במובייל. וגם, אפשר לתת לפרטי הקשר מסך שלם בלי להאריך את הגלילה.</p>
    <p style="height:60vh"></p>
    <p>עוד קצת תוכן לפני הסוף.</p>
    <p style="height:40vh"></p>
    <p>וזהו, מכאן הפוטר.</p>
  </div>
</div>
<footer class="rvf-footer">
  <h3>נדבר?</h3>
  <div class="rvf-cols">
    <div><span>info@example.com</span><span>03-1234567</span></div>
    <div><span>עבודות</span><span>שירותים</span><span>אודות</span></div>
    <div><span>אינסטגרם</span><span>לינקדאין</span><span>פייסבוק</span></div>
  </div>
  <div class="rvf-bottom"><span>כל הזכויות שמורות</span><span>תנאי שימוש · מדיניות פרטיות</span></div>
</footer>

JS

(function(){
  const page=document.querySelector(".rvf-page"),footer=document.querySelector(".rvf-footer");
  // השוליים בתחתית העמוד שווים לגובה הפוטר. נמדד ומתעדכן בשינוי גודל.
  function fit(){page.style.marginBottom=footer.offsetHeight+"px";}
  fit();
  addEventListener("resize",fit);
  if(document.fonts&&document.fonts.ready)document.fonts.ready.then(fit);
})();