パーツ番号 09-12-06 ・ JavaScript使用

上部ドロップイン通知バナー

画面上部からバナーがドロップインするように現れる通知演出です。新着情報やメンテナンス告知など、ページ上部で目立たせたいWordPressサイトのお知らせ表示に向いています。

プレビュー

ソースコード

HTML

<div class="stage09-12-06">
          <div class="banner09-12-06">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#fff" stroke-width="2.2"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>
            <span>新しいアップデートを配信中です</span>
          </div>
        </div>

CSS

.d09-12-06{ background:#eef1f6; }
        .d09-12-06 .stage09-12-06{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-06 .banner09-12-06{
          position:absolute; left:14px; right:14px; top:14px;
          display:flex; align-items:center; gap:9px;
          background:linear-gradient(90deg,#4338ca,#6366f1);
          color:#fff; border-radius:10px; padding:11px 14px;
          box-shadow:0 10px 24px rgba(67,56,202,.35);
          transform:translateY(-140%); opacity:0;
          transition:transform .5s cubic-bezier(.22,.9,.35,1.1), opacity .35s ease;
        }
        .d09-12-06 .banner09-12-06.show09-12-06{ transform:translateY(0); opacity:1; }
        .d09-12-06 .banner09-12-06 span{ font-size:12px; font-weight:700; }

JavaScript

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-06');
        var banner = root.querySelector('.banner09-12-06');
        function cycle(){
          banner.classList.add('show09-12-06');
          setTimeout(function(){ banner.classList.remove('show09-12-06'); }, 2300);
        }
        cycle();
        setInterval(cycle, 3800);
      })();

クラス名 .d09-12-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。