背景に雪を降らせるUserCSS
SVGでアニメーションをする画像をつくる
その画像を背景に設定する
既存の問題点
処理が重い
たまに処理落ちして画面がチラつく
慣れると、パターンがわかってしまい、雪にみえない
集中して編集作業をしたい時などは、気が散ってしまう
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/programming-notes/背景に雪を降らせるUserCSS/s03.svg
code:style.css
body {
background-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/programming-notes/背景に雪を降らせるUserCSS/s02.svg');
}
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/programming-notes/背景に雪を降らせるUserCSS/s01.svg
もう少し均等に分布させるとパターンっぽく見えなくなったり？yosider.icon
code:s01.svg
<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<style type="text/css">
#snowflakes{
animation: fallAnime 1s linear infinite;
}
@keyframes fallAnime{
0% { transform: translateY(-50%)}
100% { transform: translateY(50%)}
}
</style>
<g id="snowflakes" fill="snow">
<circle cx="1" cy="1" r="1" />
<circle cx="3" cy="25" r="1" />
<circle cx="15" cy="25" r="1" />
<circle cx="25" cy="20" r="1" />
<circle cx="40" cy="25" r="1" />
<circle cx="45" cy="15" r="1" />
<circle cx="50" cy="11" r="1" />
<circle cx="58" cy="30" r="1" />
<circle cx="1" cy="61" r="1" />
<circle cx="3" cy="85" r="1" />
<circle cx="15" cy="85" r="1" />
<circle cx="25" cy="80" r="1" />
<circle cx="40" cy="85" r="1" />
<circle cx="45" cy="75" r="1" />
<circle cx="50" cy="71" r="1" />
<circle cx="58" cy="90" r="1" />
</g>
</svg>
ちょっと修正 suto3.icon
すごい、2重にするとかなりリアルに見える！yosider.icontakker.icon
降る速度を変えているのか、なるほど…
一定以上スクロールすると止まる？のは仕様ですか？
（多分）仕様ですsuto3.icon
処理が重くなったら、描画のスレッドを止めちゃんでしょうね
同様に、もう少し早く動かしたいのですが、できません
もう少し早く動かしたほうが雪らしく見えます
code:s02.svg
<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<style type="text/css">
#snowflakes1{
animation: fallAnime 1s linear infinite;
}
#snowflakes2{
animation: fallAnime 0.5s linear infinite;
}
@keyframes fallAnime{
0% { transform: translateY(-100%)}
100% { transform: translateY(0%)}
}
</style>
<g id="snowflakes1" fill="snow">
<circle cx="1" cy="1" r="1" />
<circle cx="5" cy="25" r="1" />
<circle cx="11" cy="8" r="1" />
<circle cx="12" cy="25" r="1" />
<circle cx="17" cy="20" r="1" />
<circle cx="28" cy="45" r="1" />
<circle cx="33" cy="15" r="1" />
<circle cx="46" cy="11" r="1" />
<circle cx="58" cy="55" r="1" />
<circle cx="1" cy="61" r="1" />
<circle cx="5" cy="85" r="1" />
<circle cx="11" cy="68" r="1" />
<circle cx="12" cy="85" r="1" />
<circle cx="17" cy="80" r="1" />
<circle cx="28" cy="105" r="1" />
<circle cx="33" cy="75" r="1" />
<circle cx="46" cy="71" r="1" />
<circle cx="58" cy="115" r="1" />
</g>
<g id="snowflakes2" fill="snow">
<circle cx="3" cy="1" r="2" />
<circle cx="35" cy="25" r="2" />
<circle cx="11" cy="8" r="2" />
<circle cx="3" cy="61" r="2" />
<circle cx="35" cy="85" r="2" />
<circle cx="11" cy="68" r="2" />
</g>
</svg>
code:s03.svg
<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
<style type="text/css">
#snowflakes1{
animation: fallAnime 1s linear infinite;
}
#snowflakes2{
animation: fallAnime 0.5s linear infinite;
}
@keyframes fallAnime{
0% { transform: translateY(-100%)}
100% { transform: translateY(0%)}
}
</style>
<rect x="0" y="0" width="60" height="60" fill="black" />
<g id="snowflakes1" fill="snow">
<circle cx="1" cy="1" r="1" />
<circle cx="5" cy="25" r="1" />
<circle cx="11" cy="8" r="1" />
<circle cx="12" cy="25" r="1" />
<circle cx="17" cy="20" r="1" />
<circle cx="28" cy="45" r="1" />
<circle cx="33" cy="15" r="1" />
<circle cx="46" cy="11" r="1" />
<circle cx="58" cy="55" r="1" />
<circle cx="1" cy="61" r="1" />
<circle cx="5" cy="85" r="1" />
<circle cx="11" cy="68" r="1" />
<circle cx="12" cy="85" r="1" />
<circle cx="17" cy="80" r="1" />
<circle cx="28" cy="105" r="1" />
<circle cx="33" cy="75" r="1" />
<circle cx="46" cy="71" r="1" />
<circle cx="58" cy="115" r="1" />
</g>
<g id="snowflakes2" fill="snow">
<circle cx="3" cy="1" r="2" />
<circle cx="35" cy="25" r="2" />
<circle cx="11" cy="8" r="2" />
<circle cx="3" cy="61" r="2" />
<circle cx="35" cy="85" r="2" />
<circle cx="11" cy="68" r="2" />
</g>
</svg>