パーツ番号 07-11-09 ・ JavaScript使用

マウス追従パンズーム画像

フレーム内でマウスを動かすと、拡大された画像がその方向へわずかに視点移動するパン演出です。WordPressの製品詳細ページで質感や細部を見せたいサムネイルに向きます。

プレビュー

ソースコード

HTML

<div class="d07-11-09-frame">
          <div class="d07-11-09-img"></div>
        </div>

CSS

.d07-11-09-frame{position:relative;width:220px;height:150px;border-radius:12px;overflow:hidden;cursor:crosshair;box-shadow:0 4px 14px rgba(0,0,0,.14)}
        .d07-11-09-img{position:absolute;inset:-22% -20%;width:144%;height:144%;background:linear-gradient(135deg,#00c6ff,#0072ff,#7b2ff7);transition:transform .15s ease-out}

JavaScript

(function(){
        var root=document.getElementById('item-07-11-09');if(!root)return;
        var frame=root.querySelector('.d07-11-09-frame');var img=root.querySelector('.d07-11-09-img');
        frame.addEventListener('mousemove',function(e){
          var r=frame.getBoundingClientRect();
          var x=(e.clientX-r.left)/r.width-0.5;
          var y=(e.clientY-r.top)/r.height-0.5;
          img.style.transform='translate('+(-x*34)+'px,'+(-y*34)+'px)';
        });
        frame.addEventListener('mouseleave',function(){
          img.style.transform='translate(0,0)';
        });
      })();

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