パーツ番号 08-14-12 ・ JavaScript使用

カーソルに伸縮するマグネットゲージ

バー上でカーソルを動かすと、位置に応じてゲージがまるで磁力に引かれるように伸び縮みします。WordPressのスキル紹介やローディング演出に使えます。

プレビュー

ソースコード

HTML

<div class="d08-14-12-track">
          <div class="d08-14-12-fill"></div>
        </div>

CSS

.d08-14-12-track{position:relative;width:220px;height:14px;border-radius:8px;background:#e2e2e8;overflow:visible}
        .d08-14-12-fill{position:absolute;top:0;left:0;height:100%;width:20%;border-radius:8px;background:linear-gradient(90deg,#22c55e,#84cc16);transition:width .12s ease-out}

JavaScript

(function(){
        var track=document.querySelector('#item-08-14-12 .d08-14-12-track');
        var fill=document.querySelector('#item-08-14-12 .d08-14-12-fill');if(!track||!fill)return;
        track.addEventListener('mousemove',function(e){
          var r=track.getBoundingClientRect();
          var x=e.clientX-r.left;
          var pct=Math.max(6,Math.min(100,(x/r.width)*100));
          fill.style.width=pct+'%';
        });
        track.addEventListener('mouseleave',function(){fill.style.width='20%';});
      })();

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