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

カーソル追従スプリットライン

マウスを動かすたびに境界線がカーソルのX座標へリアルタイムに追従して分割位置が変わります。リフォームやダイエット等のビフォーアフター訴求セクションで、能動的に比較させたいときに使えます。

jsinput

プレビュー

ソースコード

HTML

<div class="d01-13-11-wrap">
          <div class="d01-13-11-pane d01-13-11-a"><span>BEFORE</span></div>
          <div class="d01-13-11-pane d01-13-11-b"><span>AFTER</span></div>
          <div class="d01-13-11-line"></div>
        </div>

CSS

.prev.d01-13-11{padding:0}
        .d01-13-11-wrap{position:relative;width:100%;height:230px;overflow:hidden;cursor:col-resize}
        .d01-13-11-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
        .d01-13-11-pane span{color:#fff;font-weight:800;font-size:14px;letter-spacing:.06em}
        .d01-13-11-a{background:linear-gradient(135deg,#64748b,#334155)}
        .d01-13-11-b{background:linear-gradient(135deg,#059669,#047857);clip-path:inset(0 0 0 50%)}
        .d01-13-11-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 8px rgba(0,0,0,.3)}

JavaScript

(function(){
        var root=document.getElementById('item-01-13-11');if(!root)return;
        var wrap=root.querySelector('.d01-13-11-wrap');
        var b=root.querySelector('.d01-13-11-b');
        var line=root.querySelector('.d01-13-11-line');
        wrap.addEventListener('mousemove',function(e){
          var rect=wrap.getBoundingClientRect();
          var pct=Math.max(0,Math.min(100,((e.clientX-rect.left)/rect.width)*100));
          b.style.clipPath='inset(0 0 0 '+pct+'%)';
          line.style.left=pct+'%';
        });
        wrap.addEventListener('mouseleave',function(){
          b.style.clipPath='inset(0 0 0 50%)';
          line.style.left='50%';
        });
      })();

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