触れると消えるバナー

ウィジェットで「フッター直前」にブログパーツを挿入

外観➔カスタマイズ➔追加CSSにコードを記入します。
バナーの表示・非表示のアニメーション

.fixed-banner {
  transition: opacity 0.3s ease;
}

.fixed-banner.hidden {
  opacity: 0;
  pointer-events: none;
}

続いて外観➔カスタマイズ➔高度な設定にて細かいアニメーションを行います。

「bodyタグ終了直前に出力するコード」に記載します。

<script>
(function () {
  const banner = document.querySelector('.fixed-banner');
  if (!banner) return;

  let inactivityTimeout;

  const hideBanner = () => {
    banner.classList.add('hidden');
  };

  const showBanner = () => {
    banner.classList.remove('hidden');
  };

  const resetInactivityTimer = () => {
    hideBanner(); // 操作があった瞬間に非表示
    clearTimeout(inactivityTimeout);
    inactivityTimeout = setTimeout(() => {
      showBanner(); // 操作が止まってから3秒後に再表示
    }, 3000);
  };

  // ユーザー操作を検知するイベント
  ['mousemove', 'mousedown', 'touchstart', 'scroll', 'keydown'].forEach(eventType => {
    window.addEventListener(eventType, resetInactivityTimer, { passive: true });
  });

  // 初期表示
  showBanner();
})();
</script>