I made a ripple effect for material design.
It is an effect that spreads ripples when you click on an element.
# web _ production # programming # change jobs # daitra # animation
2024/11/4 Edited to
私も実際にこのリップルエフェクトを自分のWebサイトのボタンに導入してみました。使ったのはCSSのアニメーションとJavaScriptでクリック位置を取得するシンプルな方法です。 ポイントは波紋のサイズをクリックされた要素の大きさに合わせて変えることと、アニメーションの持続時間を調整して自然に見せることですね。 例えば、CSSで.rippleクラスに対してtransformスケールのアニメーションと透過度の変化を設定し、JavaScript側でクリックイベントをトリガーに新しいdiv要素を作り波紋を生成します。これによって画面上を綺麗に波紋が拡散していく演出ができます。 実装時には、overflow:hiddenを親要素に設定することで波紋がはみ出さないよう調整しています。また、クリック頻度が高くなってもリップルが重ならないように、古い波紋はアニメーション終了後に削除する工夫も必要です。 この方法はReactやVueなどのフレームワークでも応用可能で、ユーザーの操作感を向上させるためのインタラクティブなUI作りに役立っています。初学者の方もぜひ試してみてください！
