パーツ番号 07-01-08 ・ JavaScript使用

ホバーパララックス画像

マウス位置に応じて画像がわずかに追従し、奥行きを感じさせる。WordPressのヒーローセクションやブランドサイトのアイキャッチに。

galleryjs3d

プレビュー

ソースコード

HTML

<div class="d07-01-08-area">
          <div class="d07-01-08-img"><span>🎈</span></div>
          <p class="d07-01-08-hint">カーソルを動かしてみてください</p>
        </div>

CSS

.d07-01-08-area{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d07-01-08-img{width:190px;height:150px;border-radius:14px;background:linear-gradient(135deg,#fb7185,#fbbf24);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.18);transition:transform .15s ease-out;will-change:transform}
        .d07-01-08-img span{font-size:56px}
        .d07-01-08-hint{margin:0;font-size:11px;color:#94a3b8}

JavaScript

(function(){
        var prev=document.querySelector('#item-07-01-08 .d07-01-08');if(!prev)return;
        var img=prev.querySelector('.d07-01-08-img');
        prev.addEventListener('mousemove',function(e){
          var r=prev.getBoundingClientRect();
          var x=(e.clientX-r.left)/r.width-.5;
          var y=(e.clientY-r.top)/r.height-.5;
          img.style.transform='translate('+(x*18)+'px,'+(y*14)+'px) rotate('+(x*3)+'deg)';
        });
        prev.addEventListener('mouseleave',function(){
          img.style.transform='translate(0,0) rotate(0deg)';
        });
      })();

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