雪をページ内に降らせたい

Question

クリスマスに向けてページをクリスマス仕様に変更しようと思っています。
具体的にはページに雪を降らせたいと考えております。
下記のページを参考に試してみたのですが
https://naifix.com/blog-snow/
初心者なのでうまくいきませんでした。。

何か初心者でも分かり易い方法があれば教えていただきたいと思います。

何卒よろしくお願い致します。

Answer

ECマスターズの塚本です。

いただいたご質問ですが、
こちらお調べしまして担当よりご連絡させていただきます。

お時間いただきますが、今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

PCページに関するお話ということでよろしいでしょうか。
また、楽天GOLDで作ったページ（トップページ、特設ページ、で埋め込むページ）に限らず、
商品ページを含め、ほぼ全てのPC用ページに適用をご希望でしょうか。

楽天GOLD以外のPCページでは、JavaScriptを利用することができませんが、
CSSは利用することができますので、
いただいたページで紹介されている
「CSS Snow Effect」はご利用いただくことができます。

ですが、私にて、
ページ全体に対して「CSS Snow Effect」を追加したところ、
MacBook ProのCPU使用率が、一気に50%上昇いたしました。

雪を降らせる、という処理は、
雪を担当する画像に対して、常に移動の仕方を計算する必要があり、
どうしてもPCに負荷がかかってしまいますので、

たとえば、お客様がページを開いた途端、
スクロールしづらくなったり、最悪の場合固まって操作できなくなる、
といった恐れがあります。

どうしても雪を降らせたい、という場合は、
「CSS Snow Effect」のCSSに対して、
1行目を
body {
に、3行目の各画像URL（image/snow*.jpg、計３つ）を
わかちゃんさんが実際にGOLDに設置された画像ファイルのURLに、
それぞれ置き換えていただき、

とで囲んで
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
挿入していただくことで
ページ全体に雪を降らせることができますが、

先述の負荷の件を念頭に置いていただいた上で、
導入をご検討いただきますようお願いします。

なお、今回のCSSは、対象の要素（今回はタグ）の背景を利用して
雪を降らせる処理を行っているため、
ページ上の画像や文字などの要素の上に雪が降ることはないことを
予めお含みおきください。

もし、競合する他のショップが、わかちゃんさんのご希望どおりに、
ページ全体に雪を振らせている処理を行われておりました場合は、
ページを開く前後で、CPU使用率を比べていただき、
どれだけPCに負担がかかっているか、ご確認いただければと思います。
CPU使用率は、WIndowsはタスクマネージャー、Macはアクティビティモニタでご確認いただけます。