css:text-shadowの妙な使い方＠雪を降らせてみよう

2024.10.09 TECH: css:text-shadowの妙な使い方＠雪を降らせてみよう

前置き

雪乞いしようぜぃ！って話ではないです…『勉強会』の課題です

NorthDetail フロントエンドグループでは、不定期的に『勉強会』なるものを行っています。
ザックリとした課題を出して、メンバー各々がその課題に対する自分なりの答えを導き出し、全員で集まって『答え合わせ』しながら、ディスカッションする…というモノです。

一応、課題作成者がレビューを行い、採点的なことも行いますが、私個人としてはマークアップというものに完全正解はないと思っています。
理由は【見る角度・優先順位・サイト特性・画面内での役割・更新汎用性】などなどのチョットした視点の違いで、html文章構造は大きく変わってくるからです。
当然、文章構造が変われば css などの書き方にも違いがでてきます。

それぞれの人が、イロイロな角度・視点から、様々なマークアップを行ってくるので、それをレビューするだけでも、大変おもしろく、学び・気付きも少なからずです。
今回も js派 css派 canvas派などなどイロイロな実装が見られて、とても楽しくレビューさせていただきました

設定自体も『メッチャ吹雪』だったり『部屋の中から外を見ているような作り方』だったり『雪が積もっていったり』とサマザマでした
今回のキモになるのは『雪が降っている』ように魅せること！
雪独特のユラメキ感だったり、ランダム感だったり
雪自体の質感だったり・・・などを考慮した方が多かったように思います

とりあえず私が提出した完成物

良い背景画像のおかげで雰囲気までよく見えますね＾＾
コンセプトはcodepen内にコメントで書いてある通り下記です

javascript を使わずに実装したい(苦手だからね)
でも雪の数や形や動きや色合いをイイ感じにコントロールしたい(ここがキモだからね)
でもでもhtmlは簡単にしたい(面倒だからね)
でもでもでも可読性も良くしたいし修正もラクしたい(他人に優しい人でありたいからね)

ということで私の結論は・・・フォントを使う！

THE・手抜き！だけど…一石五鳥ぐらい？ｗ

まずは html構造

<div class="l-wrapper">
  <ul class="c-snowfrake">
    <li>❆</li>
    <li>❅</li>
    <li>☆</li>
    <li>❆</li>
    <li>●</li>
    <li>❆</li>
    <li>●</li>
    <li>❆</li>
    <li>☀</li>
    <li>*</li>
    <li>。</li>
    <li>❆</li>
    <li>☆</li>
  </ul>
</div>

構造もナニもないですね…
笑えるぐらいフォント依存！これを見て感じるのは、おそらく…
『意外と雪の絵文字っていっぱいあるのね』くらいなモンでしょうね
っつか、雪以外のもサラっと混じってるしｗｗｗ

css

雪の色・大きさ

@for $i from 0 to 13{
.c-snowfrake li:nth-child(#{$i + 1}){
  color:snow;
  font-size:#{($i + 8) / 2}px;
  /*font-size:random(10)+5 + px;*/
  }
}

3行目：color:snow
『white』って書くより雰囲気出るかと思って『snow』を指定ｗ
※snowは#fffafaです…純白じゃないんだね…
勉強になったね…白は200色あるからねっ！

4行目：font-size:#{($i + 8) / 2}px
フォントサイズ(雪結晶の大きさ)を指定
当初はfont-size:random(10)+5 + pxにしてたけどランダム感がランダム過ぎたので、目視にてコントロールできる感じでアナログ調整

雪の位置

@for $i from 0 to 13{
.c-snowfrake li:nth-child(#{$i + 1}){
  position:fixed;
  top:-20%;
  left:#{$i * 20}px;
  }
}

3.4.5行目で表示位置・固定などのコントロール
5行目：left:#{$i * 20}px
ここも当初はランダム関数を使っていたけどランダム感がランダム過ぎたので、目視にてコントロールできる感じでアナログ調整

雪の量(画面に対する密度)

@for $i from 0 to 13{
.c-snowfrake li:nth-child(#{$i + 1}){
  text-shadow:
  5vw -100px 2px white,
  7vw -400px 3px white,
  10vw -130px 5px white,
          ：
          ：
  96vw -500px 10px white;
  }
}

一見？？？？かもですが
text-shadowを使って雪結晶を増殖しています
※上記は省略してますが本来は35個ほどに増殖してます

text-shadow を使うメリットは【横位置・縦位置・ブラー・色】を1つ1つコントロールできることで、それによって降っている雪の量(画面に対する密度)をコントロールするだけでなく、何となくランダム感も演出できます
※ブラーをかけているので『snow』より濃い『white』を指定してます

雪の動き

@for $i from 0 to 13{
.c-snowfrake li:nth-child(#{$i + 1}){
  animation:snowfrake #{($i * .5) + 10}s ease-in-out #{($i * 1.5)}s infinite;
  }
}
@keyframes snowfrake{
  100%{
    color:transparent;
    top:150%;
    transform:rotate(125deg);
  }
}

前述までで『絵文字だったりのフォント』をなんとなく『バラバラの大きさ』『バラバラの位置』『バラバラの質感』に増殖させたワケですが
【雪を降らせる】には動きが必要となります…当たり前です
増殖させた絵文字などを上から下へと動かせば、雪が降っているように見えるでしょうか？

答えは【否】ですね
ここでの『キモ』は10行目のtransform:rotate(125deg)です
要素自体の中心点もズレていますし、ハデに増殖したおかげで要素自体の大きさにも差異があるので、落下速度が同じでも実質動く距離に違いが出てくるので見た目的にランダム感が出ます、さらに中途半端な回転を与えることで『雪のユラメキ感』がググッとアップします