[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js

Post on:2015年8月5日

sponsors

スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。

ランディングページや使い方ページでこういうのよく見かけますね。

TouchPoint.jsのデモ

実際の動作は、デモで楽しめます。
タップ・クリックすると、そのポイントから波紋が広がります。

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="touchpoint.min.js"></script>
</body>

タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。
プロトタイプであれば、「window」でいいでしょう。

<script>
  TouchPoint.init(window);
</script>

エレメントを指定したり、波紋のカラーやサイズや不透明度を変更することも可能です。

<script>
  TouchPoint.el = 'span';
  TouchPoint.color = 'red';
  TouchPoint.opacity = 0.5;
  TouchPoint.scale = 14;
  TouchPoint.size = 5;
</script>