【コピペで簡単】CSSで雪を降らせる方法

2023年1月1日

R.U.I

普段はECサイト運営会社でWEBエンジニア＆マーケターとして従事しているR.U.Iです。

冬場のLP（ランディングページ）では、どうやって冬っぽくしよう？とか、どうやってクリスマスっぽくしよう？とか悩みますよね。

主にECサイト（ネットショップ）向けの記事になりそうですが、そこでオススメの方法が「ページ全体に雪を降らせる」です。

今回はコピペで簡単にページに雪を降らせる方法をご紹介します。ページの軽さを重視して HTML と CSS のみ！

お気づきでしょうか？そう、このページでは特別に雪を降らせています。

簡単に実装できるので、ぜひ活用してみてください。

それでは紹介していきましょう！

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。プロフィール詳細やレビューガイドライン

CSSで雪を降らせるためのhtmlコピペ用コード

まずは html のサンプルを紹介します。

<div class="snow">●</div>
<div class="snow snow2nd">●</div>

はい、HTML はたったこれだけ！

2種類の雪を降らせることでそれっぽく見えます。

適当なところに配置してあげてください。

コンテンツの最後へ配置しちゃって大丈夫です。

追記

もっとリッチな雪を降らせたい方は Font Awesome の利用も検討しましょう。

●でもふわふわしているし良いのだけれど、より雪っぽさがでます。

Font Awesome を利用する方は以下の HTML コードをコピペしてください。

<div class="snow"><i class="far fa-snowflake"></i></div>
<div class="snow2nd"><i class="far fa-snowflake"></i></div>

2次元のルイ

本ページで降らせているのは●だけれど、よければ試してみてね。

CSSで雪を降らせるためのCSSコピペ用コード

次にメインの CSS コピペ用コードがこちら。

.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}

color:snow; はカラーコード #fffafa; と同じになるかな。

でもどうせだったらsnowっていう雪色で指定したくなっちゃう！私は。

お好きな方でどうぞ。

これらをコピペするだけで、簡単に雪を降らせることができます。超簡単で便利！

あとは雪がわかりやすいように、少し色のついた背景にしたりすると良いです。