今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect

Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De

[hr07jp]

“CSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect”

[ebisu3htn]

Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Mate […] via コリス http://

[hinashiki]

一応あとでチェックしておく

[pixmap]

波紋疾走（オーバードライブ）と名付けよう

[kana321]

タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。

[z1a2nh]

ハムON

[billie175]

CSS effect

[qrac_jp]

クリックした場所から広がるのがすごい！

[nors]

http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design

[kagioo2uma]

マテリアルデザインの例の波紋フィードバック