＜マウス追従＞キラキラ星がついてくるマウスストーカーにするには？

jQuery/jsが苦手な初心者で、知識が乏しく恐れ入ります＞＜

以下で簡単なマウス追従サンプルを作成しました。

現在：#icon(img画像）がついてくる
やりたいこと：キラキラの星達がついてくる（以下URLのような形にしたい）
参考ページhttp://oekakirenn.webcrow.jp/mouse/mouse_moji1.html

聞きたいこと：
①以下コードの一部を書き換えて、上記ページのようなキラキラ追従が可能か？
②以下コードを活用できない場合は、どのような書き方をすればいいのか？

html
1<body>
2  <section class="products">
3    <div id="icon" style="width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden; position: absolute; top: 0px; left: 0px; ">
4      <img src="image/stamp2.png" alt="" width="100" height="100">
5    </div>
6  </section>
7
8<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>	
9<script>
10  var mtArea = document.getElementsByClassName("products")[0];//追従する範囲を取得・指定
11  var mtX = 0;
12  var mtY = 0;
13  var mtObject = $("#icon"); //マウス追従することで付いてくるオブジェクト指定
14  $(mtArea).on("mousemove",function(e){
15    mtX = e.clientX-50;
16    mtX = mtX+"px";
17    mtY = e.clientY+50;
18    mtY = mtY+"px";
19    $(mtObject).css({
20      "top":mtY,
21      "left":mtX
22    });
23    console.log(mtX);
24  });
25
26</script>
27</body>
28
29

x_x

2018/10/09 00:54

stamp2.pngはどのような画像なのでしょうか？参考サイトのように落下するのであればGIFアニメのほうがいいような気がします

nan9

2018/10/13 10:56

お返事が遅くなって申し訳ありません。stamp2は、犬の足跡のイラストでした＞＜GIFアニメの方がいいとのことで、自身がその辺の理解が足らないので、もう少し勉強してみます。ありがとうございます。

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

回答1件

ベストアンサー

①以下コードの一部を書き換えて、上記ページのようなキラキラ追従が可能か？
一部というのがどの程度かわかりませんが基本的にマウスイベントをとらえて
HTMLやCSSに対して何か変更を加えるという意味ではできると思います

というよりただ追従するだけでいいならほぼできてるかと
いま .products の中に #icon しかないので .products ごと動いちゃってますが
.products に width:100vw, height:100vh あたりつけて範囲を固定すれば
すでにやりたいことはできてるんじゃないかと

あとは色を変化させたりフェードで消えるようにしたりとか
ディレイをかけて多少おくらせて表示させるとか乱数でゆらぎをつけるとか好みで

ただ参考ページのようにマウスの軌跡に残り続けて独立してアニメーションをするとなると
CSSを変更するだけではなくてDOM自体を追加してアニメーションする必要があるかも

append とか animate とかそのへんを使うことになるかなー

アニメーションを全部 GIF に任せるって手もありますが
いずれにしろ追加したものは消していかないと重くなるかも

投稿2018/10/10 16:20