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

クリック波紋カーソルエフェクト

クリックした位置から波紋が広がるエフェクト。ボタンやカードのクリックフィードバックとして使用できます。

clickjs

プレビュー

ソースコード

HTML

<p class="d08-06-08-hint">クリックしてみてください</p>

CSS

.d08-06-08-hint{color:#999;font-size:13px;pointer-events:none;user-select:none;}
        .d08-06-08-ripple{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(74,108,247,.5);border:1px solid #4a6cf7;pointer-events:none;transform:translate(-50%,-50%);animation:d578ripple .6s ease-out forwards;}
        @keyframes d578ripple{to{width:120px;height:120px;opacity:0;}}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-08');
          root.addEventListener('click',function(e){
            var r=root.getBoundingClientRect();
            var x=e.clientX-r.left, y=e.clientY-r.top;
            var rp=document.createElement('span');
            rp.className='d08-06-08-ripple';
            rp.style.left=x+'px';
            rp.style.top=y+'px';
            root.appendChild(rp);
            rp.addEventListener('animationend',function(){rp.remove();});
          });
        })();

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