[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js
Post on:2015年8月5日
sponsorsr
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。
ランディングページや使い方ページでこういうのよく見かけますね。
TouchPoint.jsのデモ
実際の動作は、デモで楽しめます。
タップ・クリックすると、そのポイントから波紋が広がります。
TouchPoint.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
[html]
...
コンテンツ
...
[/html]
Step 2: JavaScript
タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。
プロトタイプであれば、「window」でいいでしょう。
[javascript]
[/javascript]
エレメントを指定したり、波紋のカラーやサイズや不透明度を変更することも可能です。
[javascript]
[/javascript]
sponsors
