Javascript：スマホでのタップやデスクトップでのクリックの時にエフェクトのアニメーションを実装してみました。

taka_oj
|
2016年3月28日
| コメントはまだありません
| JavaScript

スマホをタップした際、タップした場所に波紋のようなエフェクトを出してみました。

これだけで、 タップに反応したかどうかが見た目にわかります！

デモ画面でタップ・クリックすると、そのポイントから波紋が広がります。

では、実際にやってみましょう♪


まずはプラグインから。

こちらより【touchpoint.js】のファイルをダウンロードしてください。
https://github.com/jonahvsweb/touchpoint-js

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

↓以下が実際のソースサンプルです。


	<script src="touchpoint.js"></script>
    <script>
            (function () {
                TouchPoint.color = 'blue';
                TouchPoint.init(window); 
            })();
     </script>


    body {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0 auto;
        overflow: hidden;
    }
    .container img {
        position:absolute;
    }


    <div class="container">
    	<img src="mofumofu2.jpg" width="1300" height=auto> 
    </div>

今回は、もふもふの画像を添えてみましたｗ

※注意　タップしても、もふもふは動きません。ニャーとも返事しませんので、あらかじめご了承くださいませ。

今回、参考にさせていただいたのは、
『[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js | コリス』さんです。
ありがとうございます。

デモページは、こちら

JavaScript