フッターリビール

<footer class="fr-footer">
          <span class="fr-logo">MY SITE</span>
          <span class="fr-copy">&copy; 2026 My Site Inc.</span>
        </footer>
        <div class="fr-scroller">
          <div class="fr-content">
            <strong>下にスクロール</strong>
            <p>手前のコンテンツが終わると、その下に隠れていたフッターが視差効果とともに現れます。</p>
            <p>ページの最後に奥行きを感じさせる演出で、コーポレートサイトのWordPressテーマによく使われます。</p>
            <p>スクロールを続けてフッターの出現を確認してください。</p>
          </div>
          <div class="fr-spacer" aria-hidden="true"></div>
        </div>

.prev.d11-01-10{padding:0}
        .d11-01-10 .fr-footer{position:absolute;left:0;right:0;bottom:0;height:104px;background:#1e2433;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:1;transform:translateY(36px);will-change:transform}
        .d11-01-10 .fr-logo{font-size:15px;font-weight:800;letter-spacing:3px;color:#fff}
        .d11-01-10 .fr-copy{font-size:10px;color:rgba(255,255,255,.55)}
        .d11-01-10 .fr-scroller{position:absolute;inset:0;overflow-y:auto;z-index:2}
        .d11-01-10 .fr-content{position:relative;background:#fff;padding:22px 20px 26px;font-size:12px;line-height:1.9;color:#4a5268;min-height:330px;box-shadow:0 14px 30px rgba(20,25,40,.35);border-radius:0 0 14px 14px}
        .d11-01-10 .fr-content strong{display:block;font-size:13px;color:#2b3245;margin-bottom:6px}
        .d11-01-10 .fr-content p{margin:0 0 10px}
        .d11-01-10 .fr-spacer{height:104px;pointer-events:none}

(function(){
        var root = document.querySelector('#item-11-01-10 .d11-01-10');
        var sc = root.querySelector('.fr-scroller');
        var footer = root.querySelector('.fr-footer');
        function update(){
          var max = sc.scrollHeight - sc.clientHeight;
          var p = max > 0 ? Math.min(1, sc.scrollTop / max) : 1;
          footer.style.transform = 'translateY(' + ((1 - p) * 36) + 'px)';
        }
        sc.addEventListener('scroll', update);
        update();
      })();