マウスホバーすると星が落ちるような動きをするバナーの設定について

Question

いつもお世話になっております。

マウスホバーすると星が落ちるような動きをするバナーをたまに見かけますが
もし、そのようなことが簡単にHTMLで組めるようでしたら教えていただけないでしょうか。

難易度が高い場合は大丈夫です。
特に急いでおりませんので、お時間のある時にご返信いただけると幸いです。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

マウスオーバーで画像が切り替わる、ロールオーバー表現については
代表的な方法が下記URLにて紹介されておりますので、
まずはご一読ください。
http://html-coding.co.jp/knowhow/tips/rollover/

これらの方法はマウスカーソルをのせた画像を切り替えるものですが、
「星が落ちるような動き」というのは
また別の動きになりますでしょうか。

その場合、設定方法はほぼ同様になるかと思いますが、
もし実際にそのような動きを確認できるURLなどありましたら、
私にて確認の上、方法をご案内差し上げることができますので
URLをお知らせいただけますでしょうか。

Answer

ご連絡ありがとうございます。

こちらのサイトでいくつか使用されています。
http://www.rakuten.ne.jp/gold/yancomstore/

ご協力ありがとうございます。

Answer

ECマスターズの田中です。

URLをお知らせいただきありがとうございます。
確認したところ、
下記URLで配布されている仕組みによって、
星が落ちる動きが再現されておりした。

マウスカーソルからティンカーベルみたいなきらきらが降り注ぐ♪ ver130719
http://customtemplate.blog112.fc2.com/blog-entry-145.html

上記URLにて解説されている方法で導入できるのですが、
JavaScriptを利用しているため、
導入できるのは楽天GOLDに作成したページ内のみとなります。

また、ソースに含まれるURL
http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130719tinkerbell-min.js
は、外部リンクに該当いたしますので、
一度URLにアクセスして、名前をつけて保存していただき、
自ショップのGOLDにアップロードしていただいて、
そのファイルのURLにご変更いただきますようお願いします。