[JS]これを待ってた！波紋のように広がる美しいエフェクトを簡単に実装できるスクリプト -Waves
Googleが提唱する新UX「Material Design」で採用されている波紋の美しいエフェクトを簡単に実装できるスクリプトを紹介します。 ボタンでもアイコンでもパネル・画像でも簡単に波紋を適用でき、jQueryなど他のスクリプトは不要です。 Waves Waves -GitHub 「Material Design」が気になる方は、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しているので参考にしてみてください。 Wavesのデモ Wavesの使い方 Wavesのデモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは10+でご覧ください。 以下、デモをアニメーションgifにしてみました。 それぞれクリック・タップした地点を中心にエフェクトが波紋状に広がり、フェードで消えます。 デモ：divのパネル、画像 パネルや画像な
[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
