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

マウス追従で膨らむ文字

マウスに近い文字ほど拡大して盛り上がる、指で押したような立体テキストです。WordPressの遊び心あるブランド見出しやサービスページのアクセントに使えます。

js3d

プレビュー

ソースコード

HTML

<div class="d02-02-12-txt" aria-label="EXPAND"></div>

CSS

.d02-02-12{background:#fef3c7}
        .d02-02-12-txt{font-size:40px;font-weight:900;color:#b45309;letter-spacing:2px;display:flex}
        .d02-02-12-txt span{display:inline-block;transition:transform .15s ease-out;transform-origin:bottom}

JavaScript

(function(){
        var wrap=document.querySelector('#item-02-02-12 .d02-02-12');
        var el=document.querySelector('#item-02-02-12 .d02-02-12-txt');if(!wrap||!el)return;
        var txt='EXPAND';el.innerHTML='';
        var spans=[];
        for(var i=0;i<txt.length;i++){
          var s=document.createElement('span');s.textContent=txt[i];el.appendChild(s);spans.push(s);
        }
        wrap.addEventListener('mousemove',function(e){
          spans.forEach(function(s){
            var r=s.getBoundingClientRect();
            var cx=r.left+r.width/2;
            var dist=Math.abs(e.clientX-cx);
            var scale=Math.max(1,1.8-dist/60);
            s.style.transform='scale(1,'+scale+')';
          });
        });
        wrap.addEventListener('mouseleave',function(){spans.forEach(function(s){s.style.transform='';});});
      })();

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