2016年12月13日(火)
マテリアルデザイン風ボタンをjQueryとCSSで実装する方法
Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。
そんなマテリアルデザインの一種として
ボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。その動作をjQueryとCSSを使って実装する
マテリアルデザイン風ボタンを作ってみたので紹介してみます。マテリアルデザイン風ボタンをjQueryとCSSで実装する方法
「マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示
画面上にあるボタンをクリックすると
そのクリックしたところをポイントとして
円形の波動が広がるアニメーションを実行させます。クリックしたポイントからアニメーションを実装することで
「ボタンをクリックした」ということと
クリックした場所が視覚的に明確に分かるようになる効果があります。このボタン動作の全体構成について
◆HTML BUTTON
まずはHTMLから。基本的にはリン...
author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
MacBook Proで、Magic Trackpad2を買おうかどうかめっちゃ悩んでいる人は13インチなら要らない
NEXT ›
エンゲージメント率を高める!デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ
関連記事
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『マテリアルデザイン風ボタンをjQueryとCSSで実装する方法』についてまとめています。
この記事は特にjavascript・アニメーション・CSS3・jQuery・ダウンロード・Google・サーバ・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。