Site Builder

Editing: INTRO.html

writable 0666

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Scroll Reveal Home</title>
<meta name="description" content="A fast, accessible scroll-driven homepage with a sheet reveal effect." />

/* ---- Hero ---- */
  .hero{
    min-height:100svh; position:relative; display:grid; place-items:center;
    background: radial-gradient(1200px 600px at 20% -10%, #222 0%, #111 35%, #0c0d10 70%, #0b0c0f 100%);
    overflow:hidden;
  }
  .hero__bg{
    position:absolute; inset:-20vh -10vw;
    background:
      radial-gradient(circle at 70% 20%, rgba(122,60,255,.15), transparent 40%),
      radial-gradient(circle at 20% 70%, rgba(43,176,252,.12), transparent 35%);
    filter: blur(40px);
    transform: translateZ(0);
  }
  .hero__inner{ position:relative; text-align:center; padding:80px 0 }
  .eyebrow{ letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-size:.82rem }
  .headline{
    margin:.35em 0 .2em; font-weight:800; line-height:1.05;
    font-size: clamp(2.4rem, 4.5vw + 1rem, 5rem);
  }
  .subhead{ color:var(--muted); max-width:50ch; margin:0 auto 1.5rem }
  .cta{
    display:inline-block; padding:.85rem 1.15rem; border-radius:10px;
    background:linear-gradient(180deg, var(--accent), #5a2ee6);
    color:white; font-weight:700; text-decoration:none; box-shadow:var(--shadow);
  }

/* ---- Sheet Reveal Section ----
     The wrapper is tall (200vh). Inside it, a sticky .sheet (100vh) slides up from the bottom
     as you scroll. JS sets --p (0..1) on .sheet.
  */
  .sheet-wrap{ height:200svh; position:relative; }
  .sheet{
    position:sticky; top:0; height:100svh;
    transform: translateY(calc((1 - var(--p, 0)) * 100%));
    transition: transform .1s linear;
    will-change: transform;
  }
  .sheet__card{
    height:100%; border-radius: var(--radius) var(--radius) 0 0;
    background:#0f1015; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  }
  .sheet__media{
    position:relative; height:min(46svh, 520px); overflow:hidden;
    background:conic-gradient(from 180deg at 70% 50%, #1a1b22, #16171d, #12131a, #1a1b22);
  }
  .sheet__media::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(600px 240px at 20% -10%, rgba(122,60,255,.25), transparent 60%),
      radial-gradient(600px 240px at 80% 110%, rgba(43,176,252,.2), transparent 60%);
    filter: blur(22px);
  }
  .sheet__headline{
    position:absolute; inset:auto 0 16px 0;
    text-align:center; font-size:clamp(1.6rem, 2.2vw + 1rem, 3rem); font-weight:800;
  }
  .sheet__content{ padding:32px 24px 64px }
  .pill{ display:inline-block; padding:.35rem .7rem; border:1px solid #2a2c36; border-radius:999px; color:#cfd3db; font-size:.85rem }
  .grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:18px }
  .card{
    background:#12131a; border:1px solid #1d1f29; border-radius:12px; padding:18px;
  }
  .card h3{ margin:.2rem 0 .4rem; font-size:1.1rem }
  .muted{ color:var(--muted) }

/* ---- “Step” scrolly section (sticky images + changing text) ---- */
  .steps{ margin:14svh 0 }
  .steps__wrap{ display:grid; grid-template-columns: 1fr min(560px, 42vw); gap:32px }
  .steps__media{
    position:sticky; top:10svh; height:70svh; border-radius:14px; background:#101118; overflow:hidden;
    display:grid; place-items:center; box-shadow:var(--shadow);
  }
  .steps__img{
    width:85%; aspect-ratio:16/9; background:linear-gradient(180deg,#1e1f28,#15161d);
    border-radius:12px; box-shadow:0 6px 30px rgba(0,0,0,.3);
    transform: translateZ(0);
  }
  .step{ margin:0 0 18svh }
  .step h4{ margin:.2rem 0 .3rem; font-size:1.25rem }
  .progress{
    position:fixed; right:12px; top:12px; width:48px; height:48px; border-radius:50%;
    background: conic-gradient(var(--accent) calc(var(--totalP,0) * 1%), #2a2c36 0);
    display:grid; place-items:center; color:#fff; font-size:.75rem; opacity:.9; pointer-events:none;
  }

/* ---- Footer ---- */
  footer{ padding:48px 0; color:#a7abb3; border-top:1px solid #1d1f29; margin-top:12svh }

/* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce){
    .sheet{ transition:none }
  }
</style>
</head>
<body>

<header class="hero" aria-label="Intro">
  <div class="hero__bg" aria-hidden="true"></div>
  <div class="hero__inner container">
    <div class="eyebrow">Liberty Unites</div>
    <h1 class="headline">A fast, modern homepage with a scroll reveal</h1>
    <p class="subhead">Built with vanilla HTML/CSS/JS. No frameworks. Optimized for performance, accessibility, and easy theming.</p>
    <a class="cta" href="#learn">Explore</a>
  </div>
</header>

<section class="sheet-wrap" id="learn" aria-label="Overview">
  <div class="sheet" id="sheet">
    <div class="sheet__card">
      <div class="sheet__media">
        <div class="sheet__headline">Scroll to reveal</div>
      </div>
      <div class="sheet__content container">
        <span class="pill">What you get</span>
        <h2 style="margin:.6rem 0 0">Elegant, immersive, and fast</h2>
        <p class="muted">This “sheet” rises from the bottom and locks to the viewport. It’s powered by a tiny script that updates a CSS variable based on scroll progress inside this section.</p>
        <div class="grid">
          <div class="card">
            <h3>Sticky takeovers</h3>
            <p class="muted">Use <code>position: sticky</code> + a scroll progress variable for smooth control without janky scroll‑jacking.</p>
          </div>
          <div class="card">
            <h3>Accessible by default</h3>
            <p class="muted">Respects “reduce motion”, semantic HTML, and keeps normal page scrolling.</p>
          </div>
          <div class="card">
            <h3>Framework‑free</h3>
            <p class="muted">No GSAP/Lenis required. Add your own content or swap in images/video.</p>
          </div>
          <div class="card">
            <h3>SEO‑friendly</h3>
            <p class="muted">Real HTML content (not canvas). Fast paint and small JS footprint.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="steps container" aria-label="Highlights">
  <div class="steps__wrap">
    <div class="steps__media" aria-hidden="true"><div class="steps__img" id="swapBox"></div></div>
    <div>
      <article class="step">
        <h4>1. Parallax‑style stickiness</h4>
        <p class="muted">The media on the left stays put while the copy scrolls. You can swap the image/video on each step if you want scene changes.</p>
      </article>
      <article class="step">
        <h4>2. Low overhead</h4>
        <p class="muted">Everything here is just CSS + ~60 lines of JS. Easy to port into WordPress (Block Editor → “Custom HTML”).</p>
      </article>
      <article class="step">
        <h4>3. Brandable</h4>
        <p class="muted">Update <code>--accent</code> and the gradient tints to match your brand. Drop your own 16:9 hero image or video.</p>
      </article>
      <article class="step">
        <h4>4. Plays nice with content</h4>
        <p class="muted">Below this, add your regular sections (blog feed, products, email capture, etc.).</p>
      </article>
    </div>
  </div>
</section>

// ---- Sheet progress (0..1). We set --p on the .sheet element for CSS to read.
  const sheetWrap = document.querySelector('.sheet-wrap');
  const sheet = document.getElementById('sheet');
  function updateSheet(){
    const wrapRect = sheetWrap.getBoundingClientRect();
    const total = sheetWrap.offsetHeight - window.innerHeight; // scrollable inside this section
    const scrolled = clamp(-wrapRect.top, 0, total);
    const p = total > 0 ? scrolled / total : 1;
    sheet.style.setProperty('--p', p.toFixed(4));
  }
  updateSheet();
  addEventListener('scroll', updateSheet, {passive:true});
  addEventListener('resize', updateSheet);

// ---- Overall page progress ring (for fun)
  const pctEl = document.getElementById('pct');
  function updatePageProgress(){
    const max = document.documentElement.scrollHeight - innerHeight;
    const p = max > 0 ? clamp(scrollY / max, 0, 1) : 0;
    document.documentElement.style.setProperty('--totalP', (p*100).toFixed(2));
    pctEl.textContent = Math.round(p*100) + '%';
  }
  updatePageProgress();
  addEventListener('scroll', updatePageProgress, {passive:true});
  addEventListener('resize', updatePageProgress);

// ---- Placeholder swap for the sticky media when each step enters view
  const swapBox = document.getElementById('swapBox');
  const steps = document.querySelectorAll('.step');
  const io = new IntersectionObserver((entries)=>{
    entries.forEach(e=>{
      if(e.isIntersecting){
        // Simple visual change (you’d switch images/videos here)
        const idx = Array.from(steps).indexOf(e.target);
        swapBox.style.transform = `scale(${1 + idx*0.03}) rotate(${(idx%2?1:-1)*idx*1.5}deg)`;
      }
    });
  }, {rootMargin: '0px 0px -60% 0px', threshold: .0});
  steps.forEach(s=>io.observe(s));

// ---- Year
  document.getElementById('y').textContent = new Date().getFullYear();
</script>
</body>
</html>

Site Builder

Editing: INTRO.html

Site Builder