パーツ番号 01-13-12 ・ JavaScript使用

自動巡回スポットライト分割グリッド

4分割グリッドの中で明るく強調される区画が一定間隔で自動的に巡回していきます。事業の4本柱や制作フローの紹介セクションで、操作なしに全項目を順番に見せたいときに使えます。

autojs

プレビュー

ソースコード

HTML

<div class="d01-13-12-wrap">
          <div class="d01-13-12-cell is-active" style="background:linear-gradient(160deg,#6366f1,#4338ca)"><span>企画</span></div>
          <div class="d01-13-12-cell" style="background:linear-gradient(160deg,#0891b2,#0e7490)"><span>設計</span></div>
          <div class="d01-13-12-cell" style="background:linear-gradient(160deg,#f97316,#c2410c)"><span>制作</span></div>
          <div class="d01-13-12-cell" style="background:linear-gradient(160deg,#16a34a,#15803d)"><span>公開</span></div>
        </div>

CSS

.prev.d01-13-12{padding:0}
        .d01-13-12-wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:230px;gap:2px;background:#0f172a}
        .d01-13-12-cell{display:flex;align-items:center;justify-content:center;filter:brightness(.55);transform:scale(.94);transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s}
        .d01-13-12-cell span{color:#fff;font-weight:800;font-size:14px;letter-spacing:.06em}
        .d01-13-12-cell.is-active{filter:brightness(1);transform:scale(1)}

JavaScript

(function(){
        var root=document.getElementById('item-01-13-12');if(!root)return;
        var cells=root.querySelectorAll('.d01-13-12-cell');
        var idx=0;
        setInterval(function(){
          cells.forEach(function(c){c.classList.remove('is-active');});
          idx=(idx+1)%cells.length;
          cells[idx].classList.add('is-active');
        },1800);
      })();

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