Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。
そんなマテリアルデザインの一種として
ボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。
その動作をjQueryとCSSを使って実装する
マテリアルデザイン風ボタンを作ってみたので紹介してみます。
マテリアルデザイン風ボタンをjQueryとCSSで実装する方法
「マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示
画面上にあるボタンをクリックすると
そのクリックしたところをポイントとして
円形の波動が広がるアニメーションを実行させます。
クリックしたポイントからアニメーションを実装することで
「ボタンをクリックした」ということと
クリックした場所が視覚的に明確に分かるようになる効果があります。
このボタン動作の全体構成について
まずはHTMLから。
◆HTML <div id="linkArea"> <a href="#">BUTTON</a> </div><!-- /#linkArea -->
基本的にはリンクタグのみで実装させることが可能です。
このサンプルでは対象ボタンに対して
IDをつけたブロック要素で囲い、
その中のリンクタグに対して構成していきます。
※IDが必要なければ囲わなくても大丈夫です。
この要素に対してCSSは以下のように指定します。
◆CSS
#linkArea a {
margin: 0 10px;
padding: 15px 0;
width: 200px;
color: #fff;
font-size: 15px;
line-height: 1.4em;
text-align: center;
text-decoration: none;
display: inline-block;
overflow: hidden;
position: relative;
border: #000 1px solid;
background-color: rgba(0,0,0,1);
box-sizing: border-box;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
#linkArea a:hover {
color: #000;
background-color: rgba(255,255,255,1);
}
#linkArea a .clickPoint {
margin: -5px 0 0 -5px;
width: 10px;
height: 10px;
display: block;
position: absolute;
background: #000;
border-radius: 50%;
-webkit-animation: clicklEffect 1.5s ease-out;
-moz-animation: clicklEffect 1.5s ease-out;
animation: clicklEffect 1.5s ease-out;
}
@-webkit-keyframes clicklEffect {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(100);
opacity: 0;
}
}
@-moz-keyframes clicklEffect {
0% {
-moz-transform: scale(1);
opacity: 1;
}
100% {
-moz-transform: scale(100);
opacity: 0;
}
}
@keyframes clicklEffect {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(100);
opacity: 0;
}
}
＜a＞リンクタグに対してボタンの見た目を形成するのに加えて
ホバーアニメーションをつけています。
＜a＞タグに対してつけている幅と高さ、
および「overflow: hidden;」「position: relative;」の2つのプロパティ以外は
ボタンの見た目とホバーアニメーションとなり
クリック動作には特に影響しないのでどのような構成でも問題ありません。
＜a＞タグの中に入る「.clickPoint」が
クリックした際のアニメーションをつける要素になります。
このサンプルでは背景色を「background: #000;」として
黒色の波動によってアニメーションしますが
ここの色を白やほかの色にすることでクリックした際の波動の色を変更させることができます。
「.clickPoint」に対して
「scale」を操作した拡大アニメーションを実装させておくことで
クリックポイントの波動アニメーションを実行させます。
そして実際のクリック動作スクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$('a').on('click',function(e){
var self = $(this);
self.append('<span class="clickPoint"></span>');
var clickPoint = self.find('.clickPoint'),
offSet = self.offset(),
posY = e.pageY - offSet.top,
posX = e.pageX - offSet.left;
clickPoint.css({top:posY,left:posX});
setTimeout(function(){
clickPoint.remove();
},1500);
});
});
</script>
＜a＞リンクタグがクリックされたら、そのクリック位置を取得し、
同位置に「.clickPoint」のクラスのついた＜span＞タグを生成します。
「.clickPoint」のクラスのついた＜span＞タグは生成された時点で
先ほど設定したCSSアニメーションが実行され
拡大アニメーションによって波動のようなアニメーションが動作します。
スクリプト動作全体はこのようなシンプルな構成になっており
スクリプト動作とCSSアニメーションによって、
クリック動作を実装したマテリアル風のボタンを実装させることが可能になります。
ボタンをクリックして画面遷移するまでに一瞬だけ遅延処理を入れる
ひとつ目のサンプルではボタンにリンク先を入れていませんが
実際にページ遷移などのリンク先を入れたボタンをクリックすると
このクリックアニメーションが実行させる前に画面が切り替わってしまい
クリックアニメーション動作自体が見えないことが発生してしまいます。
その様な場合に、ページ遷移の動作を少しだけ遅らせて
クリックアニメーションをチラッと見せてから移動させるには
次のようなスクリプト構成になります。
（HTMLとCSSに関しては構成は変わりません）
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$('a').on('click',function(e){
var self = $(this);
self.append('<span class="clickPoint"></span>');
var clickPoint = self.find('.clickPoint'),
offSet = self.offset(),
posY = e.pageY - offSet.top,
posX = e.pageX - offSet.left;
clickPoint.css({top:posY,left:posX});
setTimeout(function(){
clickPoint.remove();
},1500);
// リンク遅延処理
var linkTarget = self.attr('target'),
linkHref = self.attr('href'),
linkDelay = 500;
thisHref = this.href;
if(linkTarget == '_blank') {
e.preventDefault();
setTimeout(function(){
$.ajax({
async: false,
success: function(data){
window.open(linkHref,'_blank');
}
});
},linkDelay);
} else {
e.preventDefault();
setTimeout(function(){
location.href = linkHref;
},linkDelay);
}
});
});
</script>
スクリプト24行目の「linkDelay = 500」が
クリックした後のページ遷移させるまでの遅延時間となります。
このサンプルではボタンクリック後、
0.5秒後にページ遷移するようになります。
遅延時間を長くしすぎるとユーザーにはストレスを与えてしまうので
あまり長い時間を設定しない方がよいでしょう。
これを実行させると以下のようになります。
「画面遷移に遅延処理を入れる：マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示
サンプル画面には2つのボタンを並べてあり、
・左は同ウィンドウでページ遷移
・右が「target=”_blank”」で別ウィンドウ表示
となっています。
※この別ウィンドウ動作はローカルファイルで操作する際には正常に動作しません。
サーバにアップすれば動作します。
それぞれクリック後に少し間隔をあけてページ遷移が実行されるようにすることで
クリックアニメーションを見せています。
以上がjQueryとCSSアニメーションを使って
マテリアルデザイン風のボタンクリックアニメーションを実装する紹介でした。
今回のボタンクリック動作はLIGさんブログの記事を参考にさせていただいております。
【参考記事】マテリアルデザイン風タッチフィードバックが入ったボタンを作ってみた！ | 株式会社LIG
視覚的効果に加えてクリックしたときの気持ちよさなど
ボタンをクリックしたいと思わせるような演出が実装できるのではないかと思います。
マテリアルデザイン風のボタンクリック動作を実装する際にぜひ。。。