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

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

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

デモのアニメーション

TouchPoint.js -GitHub

TouchPoint.jsのデモ

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

TouchPoint.jsの使い方

Step 1: 外部ファイル

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

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

Step 2: JavaScript

タッチポイントの対象にしたい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>

sponsors

top of page

©2018 coliss