パーツ番号 08-06-03 ・ JavaScript使用

拡大鏡カーソル

カーソル周辺だけコンテンツが拡大表示される虫眼鏡風エフェクト。写真ギャラリーや地図パーツの詳細確認UIに応用できます。

プレビュー

ソースコード

HTML

<div class="d08-06-03-pattern"></div>
        <div class="d08-06-03-lens"></div>

CSS

.d08-06-03{cursor:none;}
        .d08-06-03-pattern{position:absolute;inset:0;background-image:radial-gradient(circle,#c9d3f5 2px,transparent 2px);background-size:16px 16px;background-position:0 0;}
        .d08-06-03-lens{position:absolute;width:100px;height:100px;border-radius:50%;border:2px solid #4a6cf7;box-shadow:0 2px 10px rgba(0,0,0,.15);pointer-events:none;overflow:hidden;background-color:#fff;background-image:radial-gradient(circle,#4a6cf7 3px,transparent 3px);background-size:32px 32px;opacity:0;}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-03');
          var lens=root.querySelector('.d08-06-03-lens');
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            var x=e.clientX-r.left, y=e.clientY-r.top;
            lens.style.left=(x-50)+'px';
            lens.style.top=(y-50)+'px';
            lens.style.backgroundPosition=(50-x*2)+'px '+(50-y*2)+'px';
            lens.style.opacity=1;
          });
          root.addEventListener('mouseleave',function(){lens.style.opacity=0;});
        })();

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