DEMO動画でマウスのクリックを視覚化したい

public.icon

Demoを撮る時に、画面がクリックされたタイミングが動画でわかりにくい

https://i.gyazo.com/3414c0bd7fb02b81fd00dc2795a91083.gif

クリックしたところに赤い丸が表示されている。

解決法

以下コードをconsoleに貼り付ける

code:index.js

(function() {

const clickVisualizer = document.createElement('div');

clickVisualizer.style.position = 'fixed';

clickVisualizer.style.width = '20px';

clickVisualizer.style.height = '20px';

clickVisualizer.style.borderRadius = '50%';

clickVisualizer.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';

clickVisualizer.style.pointerEvents = 'none';

clickVisualizer.style.zIndex = '9999';

clickVisualizer.style.transition = 'transform 0.1s, opacity 0.1s';

clickVisualizer.style.transform = 'scale(0)';

clickVisualizer.style.opacity = '0';

document.body.appendChild(clickVisualizer);

document.addEventListener('click', function(e) {

clickVisualizer.style.left = (e.clientX - 10) + 'px';

clickVisualizer.style.top = (e.clientY - 10) + 'px';

clickVisualizer.style.transform = 'scale(1)';

clickVisualizer.style.opacity = '1';

setTimeout(() => {

clickVisualizer.style.transform = 'scale(0)';

clickVisualizer.style.opacity = '0';

}, 300);

});

})();