フッターリビール — 動きの伝え方辞典

scroll

footer reveal / fixed footer reveal

フッターリビール

フッターをビューポート下に固定しておき、スクロール終端で本文が捲れるとその下からフッターが現れる演出。position: fixed・本文のmargin-bottom・z-indexの3点セットで成立する。

01 — Demo video

Play live →

02 — Prompt template

ページ最下部に footer reveal を実装してください。

- フッターは position: fixed; bottom: 0 で固定し、高さを {{height}}px にする
- 本文(フッター以外を包むラッパー)に margin-bottom: {{height}}px を確保し、背景色を必ず不透明にする(透けるとフッターが常に見えてしまう)
- 重なり順は本文が上・フッターが下(本文: position: relative; z-index: 1 / フッター: z-index: 0)
- スクロール終端に近づいたら露出率(0〜1)を「スクロール残量 ÷ フッター高さ」で計算する
- 露出率に合わせてフッターを translateY({{lift}}px → 0) でせり上げる
- フッターに rgba(0, 0, 0, {{dim}}) の暗幕を重ね、露出率に合わせて0までフェードさせる
- prefers-reduced-motion 時は translateY と暗幕を無効化し、固定表示のみにする

ページ最下部に footer reveal を実装してください。

- フッターは position: fixed; bottom: 0 で固定し、高さを {{height}}px にする
- 本文(フッター以外を包むラッパー)に margin-bottom: {{height}}px を確保し、背景色を必ず不透明にする(透けるとフッターが常に見えてしまう)
- 重なり順は本文が上・フッターが下(本文: position: relative; z-index: 1 / フッター: z-index: 0)
- スクロール終端に近づいたら露出率(0〜1)を「スクロール残量 ÷ フッター高さ」で計算する
- 露出率に合わせてフッターを translateY({{lift}}px → 0) でせり上げる
- フッターに rgba(0, 0, 0, {{dim}}) の暗幕を重ね、露出率に合わせて0までフェードさせる
- prefers-reduced-motion 時は translateY と暗幕を無効化し、固定表示のみにする

ページ最下部に footer reveal を実装してください。

- フッターは position: fixed; bottom: 0 で固定し、高さを {{height}}px にする
- 本文(フッター以外を包むラッパー)に margin-bottom: {{height}}px を確保し、背景色を必ず不透明にする(透けるとフッターが常に見えてしまう)
- 重なり順は本文が上・フッターが下(本文: position: relative; z-index: 1 / フッター: z-index: 0)
- スクロール終端に近づいたら露出率(0〜1)を「スクロール残量 ÷ フッター高さ」で計算する
- 露出率に合わせてフッターを translateY({{lift}}px → 0) でせり上げる
- フッターに rgba(0, 0, 0, {{dim}}) の暗幕を重ね、露出率に合わせて0までフェードさせる
- prefers-reduced-motion 時は translateY と暗幕を無効化し、固定表示のみにする

03 — Params

height(フッターの高さ px) — 範囲 80〜180 / 初期 120
そのまま「捲れ」区間の深さになる。実サイトでは100〜400px程度。深いほど演出は劇的だが、連絡先が遠くなる。
lift(せり上がり量 px) — 範囲 0〜40 / 初期 16
露出に合わせてフッターがtranslateYでせり上がる距離。0で完全固定。10〜20pxで奥行きが出る。
dim(隠れているときの暗さ) — 範囲 0〜0.8 / 初期 0.45
捲れ始めのフッターに掛ける暗幕の濃さ。露出につれて0へ。0.4前後で「奥から現れる」遠近感が出る。

04 — Vocab

margin-bottom方式 — 本文の下端にフッターと同じ高さの余白を確保し、スクロール可能量を伸ばす手法。この演出の核で、余白の分だけ本文が捲れる。
z-index設計 — 本文が上・フッターが下という重なり順。逆にするとフッターが常に本文を覆う。本文側にposition指定がないとz-indexは効かない。
露出率(progress) — フッターが見えている割合(0〜1)。スクロール残量 ÷ フッター高さで求め、せり上がりや暗幕の補間に使う。
暗幕(scrim) — 露出前のフッターに重ねる半透明の黒。捲れた本文の「奥」から現れる遠近感を作る。opacityだけで動かす。

05 — NG → OK examples

言い方: 「「ページの最後でフッターがめくれて出てくるやつにして」」

なぜNG: 仕組み(fixed+margin-bottom+z-index)が伝わらないと、フッターをsticky bottomにしただけのものや、本文の背景が透けてフッターが常時見えている壊れた実装が返ってくる。

言い方: 「「footer revealを実装。フッターはfixed bottom・高さ120px・z-index 0。本文はrelative z-index 1・不透明背景・margin-bottom 120px。露出率に合わせてtranslateY 16px→0、暗幕0.45→0」」

なぜOK: 3点セット(fixed / margin-bottom / z-index)と本文の不透明背景まで指定している。この演出の不具合は9割が「本文が透けている」ことに起因する。