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

カラー反転カーソル(ミックスブレンド)

mix-blend-modeでカーソル部分の色が背景と反転して見える演出。ダークテーマのランディングページのアクセントに使えます。

jsdark

プレビュー

ソースコード

HTML

<div class="d08-06-06-bg"></div>
        <span class="d08-06-06-cursor"></span>

CSS

.d08-06-06{cursor:none;background:#111;overflow:hidden;}
        .d08-06-06-bg{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#222 0 20px,#333 20px 40px);}
        .d08-06-06-cursor{position:absolute;width:60px;height:60px;margin-left:-30px;margin-top:-30px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;left:0;top:0;opacity:0;}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-06');
          var cursor=root.querySelector('.d08-06-06-cursor');
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            cursor.style.transform='translate('+(e.clientX-r.left)+'px,'+(e.clientY-r.top)+'px)';
            cursor.style.opacity=1;
          });
          root.addEventListener('mouseleave',function(){cursor.style.opacity=0;});
        })();

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