Googleマテリアルデザインのripple（リップル）を本気で取り組んでみた

-

Googleマテリアルデザインでも最も重要な部分に当たるripple（リップル）に挑戦してみました。参考にしたのはもちろんGoogle。

先ずはripple（リップル）の説明ですが、マウスや指でボタン（リンク）をクリック（タップ）すると波紋（ripple）が発生して触った感覚を視覚的に演出する手法のことです。

今回は以下のボタンをメインに製作を行ってみました。

完成したのが以下になります。CodePenにてソースは実装公開しております。

See the Pen Googleマテリアルデザインripple（リップル） by yoshiaki nakao (@woopeer) on CodePen.

Google実装例を確認してみて分かった事なのですが、さすがGoogle！といったものでした。

アニメーションはすべてCSSで行われており、とてもスムーズな動きを実現させています。Javascriptでクラス名を変更する事でリップルアニメーションを実現させています。ただクラス名を変更するだけでは、リップルのスタート位置やサイズが変更できないのですが、Javascriptでスタート位置、エンド位置、サイズ、拡大サイズの４つの変数をCSS変数を指定する方法でCSSアニメーションに渡しています。

実装例ですが、「ripple-radius-in」というアニメーションを「--ripple-start」「--ripple-end」「--ripple-scale」という３つの変数で用意しておきマウスイベント等で発火させマウス座標やサイズ等を「style.cssText」で自身に設定するといった方法で変数をCSSに渡しています。CSSアニメーションに変数を渡すというのが私には発想がなかったので結構衝撃的でした。とても勉強になりました。今後、活用していきたいと思います。

CSS
@keyframes ripple-radius-in {
  from { transform: translate(var(--ripple-start, 0)) scale(1); }
  to { transform: translate(var(--ripple-end, 0)) scale(var(--ripple-scale, 1)); }
}
Javascript
element.addEventListener('mousedown', function(e){
this.style.cssText =
    "--ripple-scale:" + v_rippleScale + ";" +
    "--ripple-start:" + start_x + "px," + start_y + "px;"+
    "--ripple-end:" + end_x + "px," + end_y + "px;";
}, false);

ところで、Google実装例でGoogleとしてSEO的にこれはどうなの？という部分もございました。リップルの実装を<div class="mdc-button__ripple"></div>というブロックで行っており、これはW3Cで定義されている「デザインのために空要素を追加してはいけない」に反する行為となってしまいます。あくまで推測なのですが、リップルを擬似要素「::before」「::after」で実装している関係で、既に疑似要素を使用している場合などでは使用が困難になる場合が出てきてしまい汎用的に使用したい要望があったのかもしれません。ただ、リップルを使う場面で疑似要素を使う場面は少ないと思いますし、もしそのような場合でも内側に要素追加すれば対処は可能かと思いましたので、今回は「ripple」というクラス名だけで実装できるようにいたしました。

コメント

コメントを投稿

このブログの人気の投稿

パタパタ時計flip clockを作ってみた

-
イメージ
パタパタ時計をページ内に表示したくて作ってみました。  CSS等で３D表現しようとしたのですが、環境によって表示が重くなる場合があり、思ったよりカクカクした表示になってしまう場合がございました。またプラスチックのざらっとしたテクスチャも入れてみたかったので思い切って画像で対応することにしました。 そこで、下記の様な画像を制作いたしました。  ０から９までの数字毎に縦10列の構成になっていて、４コマで動く様に動かして行きます。 列の上から下に１列目が１コマ目、２列目が２コマ目、３列目が３コマ目、４列目が最終的に表示させたい数字になります。150ミリ秒ごとに列を動かして動いている様に見せています。 See the Pen flip clock by yoshiaki nakao ( @woopeer ) on CodePen . html、css、javascriptをうまく連携させて行います。 今回動かしたいパーツは、「時（十の位）」「時（一の位）」「分（十の位）」「分（一の位）」「秒（十の位）」「秒（一の位）」の６パーツになります。それぞれ <div id="hour10"></div><div id="hour1"></div><div id="min10"></div><div id="min1"></div><div id="sec10"></div><div id="sec1"></div>というブロックで構成いたしました。 先ずは、css。予め各パーツの背景に画像を貼り付けておきます（background-image）。 位置（background-position）はJSで設定するので設定を省きます。画像を１コマサイズ　横60px　縦100pxで制作してますが余白が下2px横4pxですのでそれぞれのパーツを　横56px　縦98px　で固定しました。秒に関しては時分より少し小さく表示させたかったので、cssで縮小（transform: scale3d）させています。 実際
続きを読む

「…続きを読む」リンク

-
 よくある依頼で長い文章の際に冒頭だけ表示したい。つまり、n行以上の場合に折りたたんで「…続きを読む」リンクを付けたいということがあります。その場合、たいていJavascriptの制御で実現させるというのが定石となります。ただ、よくあるということもあり汎用的に使えるJavascriptを作ってみましたのでご紹介いたします。 See the Pen 「…続きを読む」リンク by yoshiaki nakao ( @woopeer ) on CodePen . 設置準備 今回はjQueryを使わせていただきましたので、GoogleのCDNライブラリを読み込んでおきます。※ヘッダー等ですでに読み込み済みの場合は不要です。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 今回作成したJavascriptは以下になりまして、body内に記述する場合は、本文の邪魔にならないようbody内のできるだけ下部に設置すると（SEO的に）よいかもしれません。また、外部に設置したり、設置済みのものに追加する場合は、jQueryの後に読み込ませてください。 <script> $(function(){ $(function () { $(".more-link").each(function (v_n) { $(this).after('<div class="more-link-after"></div>'); f_lessText(v_n); }); }); function f_moreText(v_n) { var e_text = $(".more-link").eq(v_n); var v_closeHeight = e_text.height(); var v_poenHeight = e_text.css("height", "aut
続きを読む

100マス計算をwebで作ってみた

-
イメージ
小学生の算数の基礎学力向上のため、100マス計算を手軽にどこでもできる様にと、webアプリを作ってみました。 https://woopeer.com/100cells_calculation/ 小学生の算数は結局のところ四則計算（＋ー×÷）ができなくては話になりません。また、高学年になればなるほど 計算のスピード も重要な要素になってきます。 特に中学受験をお考えの方は、２桁の掛け算の暗算が必須と言われております。２桁の掛け算が暗算で、できるできないで問題を解くスピードが大きく変わってきます。受験時の算数に関してですが、普通にやっていては試験時間内に最後まで問題を解くことはできません。特に冒頭に出てくる計算問題がポイントで、正確に素早く解くことが求められます。 ここができるかが合否の分かれ目だといっても過言ではないでしょう。 ２桁の計算スピードのアドバンテージは必ず受験に役立つ物であるとお約束いたします。また受験でなくても１桁等の計算はもとより２桁の四則計算が暗算でできる様になれば一生の宝となり得ます。 操作方法 操作方法はとても簡単です。直感的な操作ができるようになっておりまして「＋」「ー」「X」のボタンのどれかを押せばスタートするようになっております。 全問回答した後、間違っている箇所は赤くエラー表示されますので間違ったところをすぐ訂正できます。 また、それぞれレベル設定ができるようになっております。レベルを上げていくと1～１０以上の数字となりまして例えばレベル10の足し算ですと横の列が20～29となり小学校低学年のお子様にちょうどよいかと思います。 おすすめはレベル10からの掛け算で横の列が10～19の掛け算です。この計算がすらすらとできるようになると小学生での算数はマスターしたも同然です。 ゲーム要素も多少取り入れておりまして、解いた時間によって🌻マークを表示させるようになっております。時間内に解いて🌻🌻🌻を目指してみては？。
続きを読む