パーツ番号 07-12-12 ・ JavaScript使用

回転レコード+ミニイコライザー

ゆっくり回転するレコード盤の横で、小さなイコライザーバーが再生に合わせて揺れ続ける演出です。音楽アーティストのプロフィールページや楽曲紹介カードのアクセントに使えます。

js3d

プレビュー

ソースコード

HTML

<div class="wrap07-12-12">
          <div class="disc07-12-12">
            <div class="hole07-12-12"></div>
          </div>
          <div class="eq07-12-12">
            <span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>

CSS

.d07-12-12{ background:#1a1625; }
        .d07-12-12 .wrap07-12-12{ display:flex; align-items:center; gap:18px; }
        .d07-12-12 .disc07-12-12{ position:relative; width:88px; height:88px; border-radius:50%; background:repeating-radial-gradient(circle,#2a2438 0 3px,#1a1625 3px 6px); box-shadow:0 6px 18px rgba(0,0,0,.4); animation:spin07-12-12 4s linear infinite; }
        .d07-12-12 .hole07-12-12{ position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:linear-gradient(135deg,#f472b6,#a855f7); }
        @keyframes spin07-12-12{ to{ transform:rotate(360deg); } }
        .d07-12-12 .eq07-12-12{ display:flex; align-items:flex-end; gap:4px; height:56px; }
        .d07-12-12 .eq07-12-12 span{ width:6px; border-radius:2px 2px 0 0; background:linear-gradient(180deg,#f9a8d4,#ec4899); animation:eq1772wave 1s ease-in-out infinite; }
        .d07-12-12 .eq07-12-12 span:nth-child(1){ height:30%; animation-delay:-0.8s; }
        .d07-12-12 .eq07-12-12 span:nth-child(2){ height:60%; animation-delay:-0.6s; }
        .d07-12-12 .eq07-12-12 span:nth-child(3){ height:90%; animation-delay:-0.4s; }
        .d07-12-12 .eq07-12-12 span:nth-child(4){ height:50%; animation-delay:-0.2s; }
        .d07-12-12 .eq07-12-12 span:nth-child(5){ height:70%; animation-delay:-0.9s; }
        @keyframes eq1772wave{
          0%,100%{ transform:scaleY(0.4); }
          50%{ transform:scaleY(1); }
        }
        @media (prefers-reduced-motion: reduce){
          .d07-12-12 .disc07-12-12{ animation:none; }
          .d07-12-12 .eq07-12-12 span{ animation:none; transform:scaleY(0.7); }
        }

JavaScript

(function(){
        var root = document.querySelector('.d07-12-12');
        if(!root) return;
        var disc = root.querySelector('.disc07-12-12');
        disc.addEventListener('click', function(){
          var running = disc.style.animationPlayState !== 'paused';
          disc.style.animationPlayState = running ? 'paused' : 'running';
        });
      })();

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