OnClick時に紙吹雪のようなアニメーションを画面上から出したいです！

こんにちは。
プログラミング初心者です。
現在Monaca(HTML+Javascript)にて初めてのアプリ開発に取り組んでいます。

タイトルのように、画像をOnClickで紙吹雪のようなアニメーションが発動する仕組みを作りたいと思っています。手始めにHTMLのCanvasタグを使って色々と試してみましたが、うまくいきませんでした。そこで、上記のようなアニメーションを作るのにおススメな適しているもの（プラグインと言えばいいのでしょうか、JQuery、CSS、のような）をご存知の方がいらっしゃいましたら是非教えていただきたいです。
念のため、以下に画像のHTML内のコードを明記致します。
Onclickで音が鳴る仕組みは既に反映させている段階です。

HTML
1<audio id="kokokara" preload="auto" class="aaa">
2<source src="se/baku2.mp3" type="audio/mp3">
3</audio>
4
5<p><a onClick="sound()"><img src="pic/sin.jpg"width="235" height="400" id="img-1" class="img-x lazy" data-width="300" data-height="300" data-src="pic/sin.jpg" data-aspect="0.748">
6</a></p>

適宜、必要に応じて詳細な情報は追加していきます。
ご協力よろしくお願いいたします。

m.ts10806

2017/07/17 21:16

「うまくいかなかった」だけでは閲覧者には伝わりません。「どのようになるはずが、どうなった」といった「具体的な予定」と「実際の結果」に書き換えてください。その時にやってみたソースコードもお願いします。

行動規範の内容に同意します

回答3件

OnClick時に紙吹雪のようなアニメーションであれば、こちらの方が作成しているjQueryプラグインを利用すれば、はじめてのアプリ開発でもある程度容易に実装できるかと思いますので確認してみてください
紙吹雪を降らせるjQueryプラグイン
 jquery.confetti
上記プラグインのサンプルデモでは画面をクリックするとクリック位置に対して紙吹雪アニメーションが表示されます
サンプルのデモ

投稿2017/07/26 14:14

aro10

総合スコア4106

anopurihana

2017/07/29 01:08

aro10さんご回答ありがとうございます。 jQueryのプラグインは以前試したことがあり、上記のリンクのページに関しても見覚えがあります。念のためにもう一度確認してみましたが、変化は見られませんでした。

行動規範の内容に同意します

adbe photoshop という画像編集ソフト、で、アニメーション画像、GIFを、作成できますが、それを、バックグラウンドイメージとしておくのはいかがですか？、データも軽く、スクリプトに制限のかかる Monacaでは有効です。必要であれば、その、GIFの作成方と、CSSを案内できますが。

アニメーションGIFの作成方。
・フォトショップを使用し、まず、ファイルメニューから、新規→白紙ファイル→サイズの指定、土台を作ります。
・左側のツールボックスの中の、四角い塗りつぶしツールを選びます。角から反対側の角まで、ドラッグ&ドロップで色をつけます。
・右下の、ツールから、レイヤーの表示を選び、表示させます。
・そのレイーヤーボックスの上部の、新規レイヤー作成で作成します。
・その新規レイーヤーが選ばれている状態で、小さな四角をたくさん作ります。
・そして、そのレイヤーの上できれば文字列で右クリックして、レイヤーの複製を選びます。
・すると、一つ一つの四角が複製されます。一つ一つ動かすのは大変なので、まとめたいレイヤーを、CTRLキー+
クリックで複数選び、その中のレイヤーの一つの左側のマークの上で右クリックします。そして、レイヤーの結合をします。
・3〜4種類、レイヤーを作ったら、それぞれの複製を、作っていき、その一つ一つの四角を動かしたり消したりします。
・動かすレイヤーの数だけ最初に作っおいた方が良いです。
・そして、最初につくった背景、やカラーバックを、シーンの数だけ複製します。
・そして、シーンごとの、レイヤーを、バックを含め全て、結合します。
・そして、ファイルメニューから、WEb用に保存を選び、ポップアップ画面で、アニメーションにチエックを入れ、再生し、OKなら、保存して出来上がりです。
・新規白紙ファイルのサイズは大きすぎない方が良いです。

CSSは全画面表示で、

<style>
.wrpp1 {
   width: auto;
   height: auto;
}
.wrapper { 
   background-image: url(url.gif);
   background-size: 100% 100%;
   width: 100%;
   height: 100%;
   z-index: 100;
</style>
<script>
function touchEvent(){
   var elem = document.getElementById("touch");
   elem.addEventListener("click",
      function(){
         var div1 = document.getElementById("wrp1");
         div1.className = "wrapper";
      }
   , false);
}
</head>
<body>
<div id="wrp1" class="wrp1">
   <p>~~</p>
   <div onclick="touchEvent()">Start Event</div>
</div>
</body>
</html>

投稿2017/07/24 08:01

編集2017/07/27 20:11