質問: jQuery/jsが苦手な初心者で、知識が乏しく恐れ入ります>< 以下で簡単なマウス追従サンプルを作成しました。 現在:#icon(img画像)がついてくる やりたいこと:キラキラの星達がついてくる(以下URLのような形にしたい) 参考ページhttp://oekakirenn.webcrow.jp/mouse/mouse_moji1.html 聞きたいこと: 1以下コードの一部を書き換えて、上記ページのようなキラキラ追従が可能か? 2以下コードを活用できない場合は、どのような書き方をすればいいのか? ``` ```
回答: 1以下コードの一部を書き換えて、上記ページのようなキラキラ追従が可能か? 一部というのがどの程度かわかりませんが基本的に マウスイベントをとらえて HTMLやCSSに対して何か変更を加えるという意味ではできると思います というよりただ追従するだけでいいならほぼできてるかと いま .products の中に #icon しかないので .products ごと動いちゃってますが .products に width:100vw, height:100vh あたりつけて範囲を固定すれば すでにやりたいことはできてるんじゃないかと あとは色を変化させたりフェードで消えるようにしたりとか ディレイをかけて多少おくらせて表示させるとか乱数でゆらぎをつけるとか好みで ただ参考ページのようにマウスの軌跡に残り続けて独立してアニメーションをするとなると CSSを変更するだけではなくてDOM自体を追加してアニメーションする必要があるかも append とか animate とかそのへんを使うことになるかなー アニメーションを全部 GIF に任せるって手もありますが いずれにしろ追加したものは消していかないと重くなるかも