Googleマテリアルデザインのripple(リップル)を本気で取り組んでみた
Googleマテリアルデザインでも最も重要な部分に当たるripple(リップル)に挑戦してみました。参考にしたのはもちろんGoogle。 先ずはripple(リップル)の説明ですが、マウスや指でボタン(リンク)をクリック(タップ)すると波紋( ripple )が発生して触った感覚を視覚的に演出する手法のことです。 今回は以下のボタンをメインに製作を行ってみました。 完成したのが以下になります。CodePenにてソースは実装公開しております。 See the Pen Googleマテリアルデザインripple(リップル) by yoshiaki nakao ( @woopeer ) on CodePen . Google実装例を確認してみて分かった事なのですが、さすがGoogle!といったものでした。 アニメーションはすべてCSSで行われており、とてもスムーズな動きを実現させています。Javascriptでクラス名を変更する事でリップルアニメーションを実現させています。ただクラス名を変更するだけでは、リップルのスタート位置やサイズが変更できないのですが、Javascriptでスタート位置、エンド位置、サイズ、拡大サイズの4つの変数をCSS変数を指定する方法でCSSアニメーションに渡しています。 実装例ですが、「ripple-radius-in」というアニメーションを「--ripple-start」「--ripple-end」「--ripple-scale」という3つの変数で用意しておきマウスイベント等で発火させマウス座標やサイズ等を「style.cssText」で自身に設定するといった方法で変数をCSSに渡しています。CSSアニメーションに変数を渡すというのが私には発想がなかったので結構衝撃的でした。とても勉強になりました。今後、活用していきたいと思います。 CSS @keyframes ripple-radius-in { from { transform: translate(var(--ripple-start, 0)) scale(1); } to { transform: translate(var(--rip