Curtain footer

The page lifts away at the end like a curtain to reveal a footer that was waiting underneath. No JavaScript.

How it works

The footer is position: fixed at the bottom with a lower z-index. The main content has a solid background and a bottom margin equal to the footer height, so scrolling to the end slides the content up and off the footer instead of pushing the footer into view.

Full file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Curtain footer</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }

body { background: #ffd23f; }
.main {
  position: relative; z-index: 1; background: #fff; color: #1a1a2e;
  padding: 15vh 8vw 10vh; margin-bottom: 70vh; min-height: 100vh;
  border-radius: 0 0 32px 32px; box-shadow: 0 20px 40px rgba(0,0,0,.2);
}
.main h1 { font: 900 clamp(2.6rem, 9vw, 5rem)/1 system-ui, sans-serif; letter-spacing: -.04em; margin: 0 0 .3em; }
.main p { font-size: 1.3rem; }
.filler { height: 120vh; background: repeating-linear-gradient(#fff 0 40px, #f4f4f8 40px 80px); border-radius: 12px; margin: 5vh 0; }
.foot { position: fixed; left: 0; right: 0; bottom: 0; height: 70vh; z-index: 0; color: #1a1a2e;
  display: grid; place-content: center; text-align: center; }
.foot h2 { font: 900 clamp(2.2rem, 8vw, 5rem)/1 system-ui, sans-serif; letter-spacing: -.04em; margin: 0 0 .3em; }
</style>
</head>
<body>
<main class="main">
  <h1>Curtain footer</h1>
  <p>Scroll to the end of this page.</p>
  <div class="filler"></div>
  <p>Almost there…</p>
</main>
<footer class="foot">
  <h2>Hello from below.</h2>
  <p>I was here the whole time.</p>
</footer>
</body>
</html>

More sticky effects