タップしたらエフェクトを出すだけのシンプルな JavaScript ライブラリ『tap.js』作りました!

phi phi on javascript, plugin

オレの Advent Calendar 2015 - Adventar の 10 日目です.

スマートフォンで Web ページやアプリでボタンを押したりリンクを踏んだ際に, タップに反応しなかったのか, それともページ遷移に時間がかかっているだけなのか どちらか判断がつかずにその場で待つってことよくありませんか?

これってちょっとしたストレスですよね?

それをサクッと解決できるシンプルなライブラリを作ったので紹介します.

tap.js とは

タップした際に, タップした場所にポワッとエフェクトを出すだけのシンプルなライブラリです. これだけで, タップに反応したかどうかが視覚的にわかるので冒頭で挙げたような問題を解決できます.

機能も使いかたもシンプルで, jQuery に依存せず名前空間も汚さないので, 手軽に既存のサービスに導入できます.

一応 PC, スマートフォン両方に対応しています.

tap.js のデモ

画面をタップするとポワッと円形のエフェクトが表示されるのが分かるかと思います.

tap.js の使いかた

tap.js を読み込んで tap() を実行するだけです.
下記をコピペしてページに貼るだけで tap.js を有効にすることができます.

<script src='http://cdn.rawgit.com/phi-jp/tap.js/v0.1.0/tap.js'></script>  
<script>  
tap();  
</script>  

もちろん tap.js をダウンロードして直接使うこともできます.

tap.js のオプション

下記のオプションに対応しています.

// 指定可能なオプション
tap.options.color     = 'red';  // エフェクトの色  
tap.options.radius    = 40;     // エフェクトの半径  
tap.options.duration  = 100;    // エフェクト表示の時間