フッター中級

せり上がり・リビールフッター

本文を最後までスクロールすると、白いコンテンツがめくれ上がり、背後に隠れていたダークフッターがせり出します。奥行きを感じさせる演出で、近年のデザインサイトで多用される手法です。

#footer#sticky#reveal#scroll

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：本文の下からせり上がるSaaSフッター -->
<div class="frv-frame">
  <footer class="frv-foot" aria-hidden="false">
    <div class="frv-foot__in">
      <p class="frv-foot__big">段取りを、ひとつに。</p>
      <nav class="frv-foot__nav">
        <a href="#" onclick="return false">機能</a>
        <a href="#" onclick="return false">料金</a>
        <a href="#" onclick="return false">サポート</a>
      </nav>
      <span class="frv-foot__copy">© 2026 FlowDesk Inc.</span>
    </div>
  </footer>

  <div class="frv-scroll" id="frvScroll">
    <div class="frv-main">
      <h1>導入企業 1,200社の段取り術</h1>
      <p class="frv-lead">最後まで読み進めると、白いコンテンツが上へ抜け、背後のダークフッターが現れます。読了とフッター到達を自然につなぐ演出です。</p>
      <p>タスク・ドキュメント・予定をひとつの画面へ。チームの「探す時間」を減らし、本来の仕事に集中できます。</p>
      <p>無料トライアルは14日間。カード登録は不要で、いつでも解約できます。</p>
      <p>このサンプルは自動で最後まで進み、フッターのせり上がりを実演します。</p>
    </div>
    <div class="frv-spacer" aria-hidden="true"></div>
  </div>
</div>

CSS

/* FlowDesk（SaaS）：せり上がりリビールフッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.frv-frame { position: relative; width: 100%; height: 380px; overflow: hidden; background: #0a0f22; }

.frv-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 230px; background: linear-gradient(160deg, #1b2350 0%, #0a0f22 100%); color: #d8def5; display: flex; align-items: center; }
.frv-foot__in { width: 100%; padding: 0 32px; }
.frv-foot__big { margin: 0 0 16px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.frv-foot__nav { display: flex; gap: 18px; margin-bottom: 18px; }
.frv-foot__nav a { color: #aab3da; text-decoration: none; font-size: 14px; font-weight: 600; transition: color .2s ease; }
.frv-foot__nav a:hover { color: #fff; }
.frv-foot__copy { font-size: 12px; color: #6b75a0; }

.frv-scroll { position: relative; z-index: 1; height: 100%; overflow-y: auto; scrollbar-width: thin; }
.frv-main { background: #f6f7fc; color: #232842; padding: 32px 30px 0; line-height: 1.85; box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.frv-main h1 { margin: 0 0 14px; font-size: 25px; font-weight: 800; letter-spacing: -.01em; }
.frv-lead { font-size: 14.5px; color: #4d5374; padding: 13px 17px; margin: 0 0 20px; border-left: 4px solid #4f6bff; background: rgba(79,107,255,.07); border-radius: 0 10px 10px 0; }
.frv-main p { margin: 0 0 18px; max-width: 560px; }

.frv-spacer { height: 230px; }

JavaScript

// （デモと同じフックを流用）最後まで自動スクロールしフッターのせり上がりを実演
(() => {
  const sc = document.getElementById('frvScroll');
  if (!sc) return;
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  let auto = !reduce, dir = 1;
  ['wheel', 'touchstart', 'pointerdown'].forEach(ev => sc.addEventListener(ev, () => { auto = false; }, { passive: true }));
  if (auto) {
    setTimeout(function step() {
      if (!auto) return;
      const max = sc.scrollHeight - sc.clientHeight;
      sc.scrollTop += dir * 1.8;
      if (sc.scrollTop >= max - 1) dir = -1; else if (sc.scrollTop <= 0 && dir < 0) dir = 1;
      requestAnimationFrame(step);
    }, 1100);
  }
})();

実装ガイド

使いどころ

デザイン性の高いサイトのページ末尾に。本文を最後までスクロールすると白いコンテンツがめくれ上がり、背後に隠れていたダークフッターがせり出す、奥行きのある演出です。

実装時の注意点

フッターをフレーム下端に絶対配置（z:0）で固定し、手前のスクロール領域（z:1）末尾に同じ高さの透明スペーサーを置きます。スペーサーは白い本文の外に置くのがポイントで、最後でフッターが透けて見えます。JS はスクロール補助のみ。本文の box-shadow がフッターに影を落とし立体感を生みます。

対応ブラウザ

position・z-index・overflow によるレイヤー構成のみで、全モダンブラウザで安定します。特別な API は不要です。

よくある失敗

透明スペーサーを本文（背景あり）の内側に入れると背景が透けずフッターが見えません（必ずスクロール領域直下に置く）。スペーサーとフッターの高さを一致させること。実サイトでは window スクロールに置き換え、position:sticky や fixed の挙動差に注意します。

応用例

フッター側にパララックスを足す、せり上がりに合わせて文字をフェードイン、スペーサー高をフッターの一部だけにして“チラ見せ”にするなどの応用があります。

コード