それでは、カーソル/マウスを移動することで、clientX
に基づいた波状パターンを表すスタイルを備えた div を生成する基本的な作業例を用意しました。
addEventlistener
を window
に追加した場合にのみ機能します: window.onmousemove= e =>AnimationBubble(e.clientX);
clientX pos を受け入れ、いくつかのクラスを含む div を生成し、数秒後に削除する単純な関数です。
mousemove
eventlistener を追加すると CPU 使用率を大幅に節約できます。ユーザーが
親 div/コンテナ の上にマウスを置いた場合にのみ div が生成されることを示します。これをフッターセクションに追加して、ユーザーにとってよりインタラクティブなものにすることを考えています。
P粉9707363842024-04-03 12:02:30
CSS クラス: pointer-events: none;
を #bubble_wrapper
の cursor: none;
に置き換えるだけで、期待どおりに動作するはずです :)