Let's be more curious.

ブログに雪を降らせて雰囲気を変える方法

はじめに

雪は冬を盛り上げてくれる素敵な妖精ですが、このWebページのようにブログに雪を降らせているWebサイトを見かけることがあると思います。

どうやって雪を降らせているのか興味があったので、頑張っていろいろ調べ、ページにCSSやCanvas(JavaScript)を埋め込んで雪を降らせてみました。

今回3つの方法で雪を降らせてみたのですが、お勉強したことを備忘録として公開したいと思います。


なおこのページはダークモードでの閲覧をおススメします。

お手数ですが右上の検索横のアイコンをクリックして切り替えて下さい。

また、デモページは24時間雪は降ってますが、このページは12時~0時の間雪を降らせてます。


なぜブログに雪を降らせるのか

12月に入り寒さも厳しくなって来ましたが、地球温暖化の影響なのか、日本は豪雪地域とそうでない地域に二極化している気がします。

管理人が住んでいる静岡県は雪の降らない都道府県ランキング第3位の温暖な地域なので雪はほとんど降らず、こちらに移り住んでから雪で困ったことは一度もありません。



雪国の方には申し訳ありませんが、せめてブログくらいは雪を降らせて冬らしい演出をしたと思い、遊んでみました。

少し頑張ってデモページを作ったので、息抜きに覗いて頂けると嬉しいです。

ブログのカスタマイズがお好きな方は、暇つぶしにブログを雪化粧してみるのも楽しいと思いますので、是非やってみて下さい。

(注)この記事は「はてなブログ」で2020/01/25に公開したものを加筆修正致しました。


ブログに雪を降らせる方法

ブログに雪を降らせる方法は、検索すると山のように見つかりますが、CSSで描画するものから専用のjQueryを使用するもの、高度なものはJavaScriptを読み設定が面倒なものまで、さまざまな方法があります。


たくさん味見した中で2009年製のPCでも何とか表示上許容範囲内と判断した3つの方法を紹介します。


最初に紹介するのはCSSのみで雪を降らせる方法です。


CSSで雪を降らせる方法

いろんなコードが公開されてますが、管理人が利用したのはFC2ブログのAkira先生のテンプレート「All-about-us」のヘッダー画像で使用されている気泡のエフェクトです。

All-about-us - FC2ブログテンプレート

All-about-us - FC2ブログテンプレート

All-about-usテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...


気泡のエフェクトはbox-shadowの要素をanimationで動かしているものですが、気泡が動く方向を上下逆にすれば雪が降っているように見えるので使えるのでは、と思ったのです。


しかしCSSソースはブログ上に公開されている訳ではないので、Akira先生に気泡のエフェクトCSSをブログで使用したいとお願いしたところ、「CSSは基本的にご利用頂いて構いません。」とご返事を頂くことが出来ました。

Akira先生、ありがとうございます。


なお、気泡のエフェクトCSSは、idとbox-shadowの要素のxy座標を流用し、その他は大幅に改変させて頂きました。

雪の画像をbox-shadowに自動変換して自分でコーディングすれば良いのに、と突っ込まれる方がいるかも知れませんが、少しでも楽したかったのです。(汗)


実装方法

プログのメインCSSに組込むと雪を降らせないページも読み込みが遅くなるので、デモページ(固定ページ)に下記HTMLを埋め込みました。

今回使用したCSSのソースコードを表示しますので、似たような表示にしたい方は参考にして見て下さい。

コード
<div id="bubble"></div>
<div id="bubble2"></div>
<div id="bubble3"></div>

<style type="text/css">
#bubble,
#bubble:after {
    width: 2px;
    height: 2px;
    box-shadow: 451px 427px lightgray, 1869px 1867px lightgray, 783px 1804px lightgray, 899px 1992px lightgray, 1174px 1005px lightgray, 526px 902px lightgray, 1367px 277px lightgray, 389px 114px lightgray, 1496px 1771px lightgray, 208px 420px lightgray, 1639px 27px lightgray, 1110px 736px lightgray, 1526px 860px lightgray, 639px 1028px lightgray, 1151px 1211px lightgray, 1652px 965px lightgray, 1330px 640px lightgray, 334px 1571px lightgray, 188px 1443px lightgray, 1259px 245px lightgray, 1845px 1256px lightgray, 1355px 1556px lightgray, 1410px 264px lightgray, 1685px 312px lightgray, 121px 764px lightgray, 1246px 1112px lightgray, 755px 1391px lightgray, 353px 1435px lightgray, 1625px 171px lightgray, 85px 563px lightgray, 1806px 902px lightgray, 131px 112px lightgray, 145px 317px lightgray, 1628px 1384px lightgray, 1981px 1749px lightgray, 1183px 1245px lightgray, 1572px 1127px lightgray, 1172px 553px lightgray, 1736px 1541px lightgray, 484px 705px lightgray, 1930px 175px lightgray, 1125px 1155px lightgray, 952px 487px lightgray, 1733px 1348px lightgray, 715px 1740px lightgray, 98px 195px lightgray, 1730px 777px lightgray, 1893px 1547px lightgray, 1225px 79px lightgray, 388px 1360px lightgray, 1648px 1560px lightgray, 1038px 1487px lightgray, 72px 1877px lightgray, 1058px 1182px lightgray, 613px 1646px lightgray, 840px 509px lightgray, 829px 1331px lightgray, 1721px 1699px lightgray, 340px 1038px lightgray, 334px 253px lightgray, 198px 1592px lightgray, 727px 1001px lightgray, 1655px 1861px lightgray, 1201px 471px lightgray, 899px 1859px lightgray, 996px 98px lightgray, 797px 1466px lightgray, 1906px 1940px lightgray, 1629px 909px lightgray, 804px 1121px lightgray, 818px 370px lightgray, 1185px 837px lightgray, 1118px 943px lightgray, 551px 912px lightgray, 1164px 1835px lightgray, 263px 98px lightgray, 42px 12px lightgray, 28px 1098px lightgray, 1458px 217px lightgray, 1247px 1348px lightgray, 1701px 1909px lightgray, 491px 1808px lightgray, 8px 674px lightgray, 30px 1016px lightgray, 874px 104px lightgray, 1958px 214px lightgray, 946px 1807px lightgray, 167px 31px lightgray, 185px 1228px lightgray, 312px 1642px lightgray, 1222px 891px lightgray, 1375px 1222px lightgray, 1090px 348px lightgray, 1932px 1456px lightgray, 760px 94px lightgray, 1183px 1375px lightgray, 201px 502px lightgray, 664px 1828px lightgray, 1605px 1744px lightgray, 337px 1010px lightgray, 1017px 1709px lightgray, 813px 1058px lightgray, 149px 217px lightgray, 734px 423px lightgray, 446px 1654px lightgray, 944px 1795px lightgray, 266px 987px lightgray, 114px 1263px lightgray, 1275px 457px lightgray, 486px 1038px lightgray, 1036px 309px lightgray, 851px 1028px lightgray, 1949px 1244px lightgray, 1835px 1586px lightgray, 1580px 1251px lightgray, 411px 620px lightgray, 547px 1141px lightgray, 184px 201px lightgray, 26px 833px lightgray, 671px 121px lightgray, 1817px 1663px lightgray, 401px 643px lightgray, 631px 1212px lightgray, 746px 659px lightgray, 1389px 930px lightgray, 1737px 619px lightgray, 390px 620px lightgray, 255px 795px lightgray, 1415px 845px lightgray, 1549px 1416px lightgray, 1022px 1109px lightgray, 1763px 600px lightgray, 1766px 409px lightgray, 1150px 110px lightgray, 463px 16px lightgray, 1150px 892px lightgray, 26px 637px lightgray, 1443px 949px lightgray, 705px 318px lightgray, 533px 1781px lightgray, 329px 474px lightgray, 1307px 566px lightgray, 749px 1537px lightgray, 56px 68px lightgray, 45px 49px lightgray, 1327px 1052px lightgray, 244px 715px lightgray, 165px 1784px lightgray, 397px 1565px lightgray, 1218px 1891px lightgray, 1744px 197px lightgray, 1581px 1875px lightgray, 139px 1431px lightgray, 1964px 449px lightgray, 1558px 134px lightgray, 1411px 1704px lightgray, 1361px 1782px lightgray, 326px 919px lightgray, 1481px 245px lightgray, 1512px 1778px lightgray, 1082px 794px lightgray, 190px 880px lightgray, 1598px 1844px lightgray, 1899px 273px lightgray, 1662px 1915px lightgray, 649px 383px lightgray, 820px 1253px lightgray, 1475px 814px lightgray, 239px 1472px lightgray, 673px 1425px lightgray, 952px 342px lightgray, 321px 1272px lightgray, 1132px 258px lightgray, 1070px 946px lightgray, 632px 705px lightgray, 1561px 1668px lightgray, 1040px 275px lightgray, 509px 1230px lightgray, 1786px 997px lightgray, 693px 1117px lightgray, 1618px 393px lightgray, 486px 7px lightgray, 77px 1974px lightgray, 1049px 1329px lightgray, 1897px 1645px lightgray, 1011px 1095px lightgray, 1901px 1782px lightgray, 1668px 222px lightgray, 1738px 1451px lightgray, 1251px 859px lightgray, 847px 1121px lightgray, 1397px 600px lightgray, 1443px 99px lightgray, 180px 1298px lightgray, 1504px 901px lightgray, 1642px 1341px lightgray, 531px 1398px lightgray, 1627px 249px lightgray, 598px 394px lightgray, 1122px 235px lightgray, 693px 1617px lightgray, 1592px 659px lightgray, 418px 211px lightgray, 1985px 1609px lightgray, 40px 770px lightgray, 358px 845px lightgray, 1886px 1768px lightgray, 88px 405px lightgray, 1765px 125px lightgray, 1947px 1284px lightgray, 1074px 1921px lightgray, 75px 1116px lightgray, 1706px 23px lightgray, 1033px 1366px lightgray, 1334px 1490px lightgray, 560px 1723px lightgray, 476px 406px lightgray, 1073px 538px lightgray, 486px 1791px lightgray, 1839px 1038px lightgray, 188px 406px lightgray, 1203px 1529px lightgray, 225px 576px lightgray, 833px 1443px lightgray, 1715px 1644px lightgray, 1866px 1661px lightgray, 271px 114px lightgray, 71px 1445px lightgray, 689px 1402px lightgray, 1770px 1829px lightgray, 1769px 1779px lightgray, 1376px 161px lightgray, 175px 731px lightgray, 1280px 1498px lightgray, 1262px 1420px lightgray, 933px 1835px lightgray, 1190px 853px lightgray, 480px 1331px lightgray, 1277px 254px lightgray, 525px 1615px lightgray, 159px 920px lightgray, 1640px 1381px lightgray, 647px 396px lightgray, 322px 964px lightgray, 507px 286px lightgray, 876px 1826px lightgray, 1820px 662px lightgray, 1365px 360px lightgray, 221px 893px lightgray, 1459px 1873px lightgray, 1908px 1768px lightgray, 1332px 1187px lightgray, 1726px 841px lightgray, 1491px 1320px lightgray, 1191px 1433px lightgray, 455px 1459px lightgray, 1194px 250px lightgray, 433px 1391px lightgray, 763px 1005px lightgray, 1922px 1436px lightgray, 356px 280px lightgray, 1910px 1958px lightgray, 1616px 852px lightgray, 558px 1434px lightgray, 855px 979px lightgray, 745px 682px lightgray, 1792px 838px lightgray, 1828px 1163px lightgray, 1023px 134px lightgray, 1238px 1494px lightgray, 1315px 1521px lightgray, 1805px 207px lightgray, 1216px 465px lightgray, 625px 1539px lightgray, 631px 680px lightgray, 1348px 419px lightgray, 985px 1812px lightgray, 1829px 1119px lightgray, 1396px 969px lightgray, 320px 1915px lightgray, 711px 692px lightgray, 780px 1925px lightgray, 1578px 430px lightgray, 1187px 1220px lightgray, 1754px 1004px lightgray, 1995px 197px lightgray, 1676px 813px lightgray, 1842px 1256px lightgray, 1694px 560px lightgray, 1664px 425px lightgray, 529px 1532px lightgray, 1924px 331px lightgray, 535px 290px lightgray, 571px 1189px lightgray, 1766px 431px lightgray, 1941px 666px lightgray, 1566px 1888px lightgray, 708px 1027px lightgray, 1978px 1345px lightgray, 173px 1898px lightgray, 898px 495px lightgray, 913px 644px lightgray, 1393px 402px lightgray, 580px 1578px lightgray, 1311px 319px lightgray, 1347px 562px lightgray, 918px 776px lightgray, 1617px 1233px lightgray, 545px 1996px lightgray, 622px 225px lightgray, 903px 1481px lightgray, 1022px 1203px lightgray, 973px 1439px lightgray, 358px 345px lightgray, 1708px 1349px lightgray, 240px 340px lightgray, 656px 1543px lightgray, 1112px 549px lightgray, 1405px 984px lightgray, 326px 1624px lightgray, 1471px 1492px lightgray, 87px 255px lightgray, 954px 991px lightgray, 1709px 1395px lightgray, 558px 218px lightgray, 1010px 569px lightgray, 777px 226px lightgray, 1700px 503px lightgray, 169px 956px lightgray, 1434px 649px lightgray, 1493px 688px lightgray, 835px 1767px lightgray, 1829px 1965px lightgray, 888px 257px lightgray, 1342px 1893px lightgray, 1022px 1339px lightgray, 1284px 775px lightgray, 1195px 976px lightgray, 940px 340px lightgray, 1057px 650px lightgray, 371px 902px lightgray, 304px 1595px lightgray, 1746px 138px lightgray, 1381px 1270px lightgray, 1541px 4px lightgray, 1514px 1977px lightgray, 941px 747px lightgray, 1636px 189px lightgray, 1745px 559px lightgray, 293px 1784px lightgray, 591px 309px lightgray, 1201px 977px lightgray, 1139px 703px lightgray, 1881px 504px lightgray, 1895px 560px lightgray, 1126px 1676px lightgray, 1218px 1333px lightgray, 1807px 734px lightgray, 190px 1483px lightgray, 420px 1589px lightgray, 425px 86px lightgray, 737px 986px lightgray, 1800px 567px lightgray, 445px 1016px lightgray, 1720px 1649px lightgray, 30px 1631px lightgray, 323px 809px lightgray, 1233px 1016px lightgray, 1347px 1056px lightgray, 1308px 143px lightgray, 1755px 586px lightgray, 1863px 722px lightgray, 763px 109px lightgray, 1579px 1662px lightgray, 1759px 791px lightgray, 249px 794px lightgray, 1266px 762px lightgray, 1684px 33px lightgray, 1379px 396px lightgray, 1784px 270px lightgray, 1508px 1673px lightgray, 581px 1206px lightgray, 1793px 1182px lightgray, 1899px 18px lightgray, 554px 390px lightgray, 1154px 746px lightgray, 1249px 1819px lightgray, 1405px 1085px lightgray, 1737px 155px lightgray, 1043px 1337px lightgray, 1829px 1581px lightgray, 805px 1040px lightgray, 1981px 1747px lightgray, 1793px 981px lightgray, 1624px 714px lightgray, 1123px 1352px lightgray, 106px 1885px lightgray, 399px 412px lightgray, 297px 1252px lightgray, 560px 1381px lightgray, 1358px 877px lightgray, 1473px 542px lightgray, 1583px 491px lightgray, 1038px 1435px lightgray, 1785px 1050px lightgray, 1917px 106px lightgray, 1187px 1217px lightgray, 1752px 910px lightgray, 652px 1048px lightgray, 1889px 1115px lightgray, 1393px 144px lightgray, 1245px 1229px lightgray, 333px 152px lightgray, 1280px 1653px lightgray, 1752px 1267px lightgray, 1647px 231px lightgray, 573px 78px lightgray, 1604px 1284px lightgray, 493px 1522px lightgray, 1461px 581px lightgray, 1785px 964px lightgray, 823px 597px lightgray, 1735px 209px lightgray, 963px 899px lightgray, 49px 303px lightgray, 609px 1414px lightgray, 1677px 683px lightgray, 1302px 1212px lightgray, 1535px 1887px lightgray, 294px 91px lightgray, 146px 1795px lightgray, 974px 1993px lightgray, 1678px 72px lightgray, 1934px 942px lightgray, 886px 1092px lightgray, 815px 1044px lightgray, 1217px 1947px lightgray, 1555px 145px lightgray, 1337px 1224px lightgray, 468px 274px lightgray, 1354px 598px lightgray, 1134px 1486px lightgray, 1268px 176px lightgray, 640px 354px lightgray, 738px 278px lightgray, 1522px 757px lightgray, 1394px 1672px lightgray, 212px 995px lightgray, 1548px 43px lightgray, 1545px 631px lightgray, 1927px 1862px lightgray, 1563px 1781px lightgray, 555px 1419px lightgray, 1566px 19px lightgray, 1464px 1180px lightgray, 424px 756px lightgray, 744px 644px lightgray, 1899px 1611px lightgray, 500px 1360px lightgray, 73px 630px lightgray, 1694px 479px lightgray, 488px 1545px lightgray, 1278px 20px lightgray, 298px 1077px lightgray, 747px 1124px lightgray, 417px 886px lightgray, 1816px 271px lightgray, 1039px 912px lightgray, 1012px 1599px lightgray, 554px 176px lightgray, 1462px 692px lightgray, 318px 867px lightgray, 1944px 564px lightgray, 1648px 253px lightgray, 1699px 1974px lightgray, 1441px 185px lightgray, 1165px 1593px lightgray, 1189px 1694px lightgray, 564px 1521px lightgray, 1309px 1797px lightgray, 1114px 256px lightgray, 379px 1291px lightgray, 1566px 1287px lightgray, 207px 1474px lightgray, 466px 445px lightgray, 432px 1124px lightgray, 1075px 421px lightgray, 144px 1755px lightgray, 1371px 187px lightgray, 997px 117px lightgray, 402px 897px lightgray, 302px 1719px lightgray, 1824px 1728px lightgray, 1240px 259px lightgray, 1024px 1594px lightgray, 498px 368px lightgray, 1185px 551px lightgray, 1951px 1632px lightgray, 978px 501px lightgray, 65px 1441px lightgray, 451px 1012px lightgray, 894px 823px lightgray, 1122px 1907px lightgray, 318px 554px lightgray, 1136px 1316px lightgray, 1506px 1693px lightgray, 1418px 524px lightgray, 430px 629px lightgray, 922px 1212px lightgray, 1697px 1025px lightgray, 244px 1138px lightgray, 1462px 1350px lightgray, 56px 579px lightgray, 493px 970px lightgray, 905px 1688px lightgray, 319px 1639px lightgray, 1603px 504px lightgray, 1433px 1565px lightgray, 812px 1236px lightgray, 1073px 202px lightgray, 1236px 526px lightgray, 795px 1846px lightgray, 1894px 1107px lightgray, 1816px 139px lightgray, 1651px 465px lightgray, 345px 726px lightgray, 314px 875px lightgray, 1934px 1434px lightgray, 505px 610px lightgray, 649px 1400px lightgray, 288px 1017px lightgray, 296px 1280px lightgray, 1552px 1643px lightgray, 1887px 1059px lightgray, 1837px 1199px lightgray, 400px 1560px lightgray, 101px 1810px lightgray, 50px 321px lightgray, 308px 207px lightgray, 1370px 1983px lightgray, 1524px 1122px lightgray, 678px 798px lightgray, 1378px 971px lightgray, 1956px 145px lightgray, 1966px 1991px lightgray, 602px 78px lightgray, 446px 921px lightgray, 1919px 973px lightgray, 1568px 471px lightgray, 1475px 1252px lightgray, 1569px 1766px lightgray, 1752px 608px lightgray, 825px 244px lightgray, 1559px 1693px lightgray, 980px 566px lightgray, 1314px 1180px lightgray, 361px 1328px lightgray, 1965px 1283px lightgray, 906px 1799px lightgray, 669px 1505px lightgray, 1489px 999px lightgray, 1321px 939px lightgray, 1744px 1570px lightgray, 1027px 1702px lightgray, 1566px 1004px lightgray, 1144px 1149px lightgray, 817px 1394px lightgray, 1941px 1119px lightgray, 1096px 1890px lightgray, 633px 1385px lightgray, 536px 1821px lightgray, 184px 1012px lightgray, 1746px 1651px lightgray, 1748px 1631px lightgray, 87px 1477px lightgray, 1317px 705px lightgray, 1030px 289px lightgray, 1296px 179px lightgray, 996px 406px lightgray, 413px 1642px lightgray, 35px 1309px lightgray, 1853px 600px lightgray, 1891px 213px lightgray, 1912px 1156px lightgray, 695px 1765px lightgray, 820px 1831px lightgray, 1927px 1001px lightgray, 1566px 612px lightgray, 1557px 346px lightgray, 863px 1517px lightgray, 323px 1380px lightgray, 1088px 1133px lightgray, 1369px 913px lightgray, 600px 518px lightgray, 625px 539px lightgray, 230px 917px lightgray, 102px 148px lightgray, 831px 1163px lightgray, 1060px 185px lightgray, 456px 177px lightgray, 1518px 66px lightgray, 1058px 965px lightgray, 1795px 1395px lightgray, 440px 245px lightgray, 904px 1847px lightgray, 1890px 1213px lightgray, 726px 1126px lightgray, 1291px 189px lightgray, 955px 1062px lightgray, 1084px 1144px lightgray, 1673px 1221px lightgray, 887px 1974px lightgray, 1485px 1403px lightgray, 204px 934px lightgray, 86px 907px lightgray, 980px 499px lightgray, 333px 836px lightgray, 613px 1409px lightgray, 1207px 418px lightgray, 1399px 1974px lightgray, 1278px 1273px lightgray, 163px 116px lightgray, 220px 846px lightgray, 149px 1679px lightgray, 1648px 811px lightgray, 668px 126px lightgray, 1156px 1020px lightgray, 1280px 786px lightgray, 650px 780px lightgray, 426px 484px lightgray, 180px 904px lightgray, 1253px 1193px lightgray, 624px 1333px lightgray, 234px 670px lightgray, 928px 1617px lightgray, 1659px 277px lightgray, 1510px 1672px lightgray, 1477px 874px lightgray, 1213px 589px lightgray, 1624px 1550px lightgray, 654px 1814px lightgray, 1686px 2000px lightgray, 1234px 550px lightgray, 1614px 1260px lightgray, 1319px 668px lightgray, 1103px 829px lightgray, 143px 1124px lightgray, 250px 1077px lightgray, 1203px 660px lightgray, 901px 439px lightgray, 1475px 1443px lightgray, 525px 51px lightgray, 669px 1635px lightgray, 1176px 1680px lightgray, 1203px 1469px lightgray, 442px 536px lightgray, 1820px 1028px lightgray, 537px 1683px lightgray, 1719px 1488px lightgray, 1222px 1706px lightgray, 629px 822px lightgray, 155px 1333px lightgray, 316px 1835px lightgray, 1780px 1730px lightgray, 405px 1265px lightgray, 385px 1802px lightgray, 891px 1208px lightgray, 13px 1509px lightgray, 985px 858px lightgray, 137px 1138px lightgray, 724px 534px lightgray, 1487px 440px lightgray, 57px 1074px lightgray, 1133px 1342px lightgray, 439px 1692px lightgray, 302px 46px lightgray, 248px 317px lightgray, 1366px 858px lightgray, 1474px 1705px lightgray, 650px 852px lightgray, 524px 1903px lightgray, 700px 1826px lightgray, 1246px 861px lightgray, 1215px 1742px lightgray, 454px 1237px lightgray, 1969px 1425px lightgray, 1459px 1153px lightgray, 332px 1972px lightgray, 1451px 1062px lightgray, 981px 28px lightgray, 1623px 654px lightgray, 62px 1781px lightgray, 1838px 492px lightgray, 1611px 356px lightgray, 868px 1466px lightgray, 1099px 561px lightgray, 1078px 260px lightgray, 923px 1749px lightgray, 1072px 1253px lightgray, 43px 1241px lightgray;
    background: 0 0;
}

#bubble2,
#bubble2:after {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 1251px 843px lightgray, 580px 572px lightgray, 1118px 204px lightgray, 1671px 425px lightgray, 802px 1047px lightgray, 1437px 1651px lightgray, 1842px 1735px lightgray, 377px 1053px lightgray, 1602px 1731px lightgray, 499px 998px lightgray, 191px 1827px lightgray, 842px 788px lightgray, 139px 686px lightgray, 1895px 10px lightgray, 1395px 1046px lightgray, 337px 1256px lightgray, 1186px 1033px lightgray, 1092px 763px lightgray, 269px 168px lightgray, 353px 1827px lightgray, 466px 1323px lightgray, 670px 1358px lightgray, 651px 1979px lightgray, 607px 1058px lightgray, 181px 1737px lightgray, 1567px 908px lightgray, 794px 524px lightgray, 59px 98px lightgray, 174px 1808px lightgray, 1831px 1445px lightgray, 1751px 1334px lightgray, 1791px 1116px lightgray, 98px 1063px lightgray, 1720px 997px lightgray, 1701px 656px lightgray, 684px 720px lightgray, 1381px 1436px lightgray, 579px 618px lightgray, 1554px 212px lightgray, 239px 370px lightgray, 1827px 1721px lightgray, 1626px 555px lightgray, 876px 725px lightgray, 1000px 1949px lightgray, 1501px 1395px lightgray, 652px 406px lightgray, 1988px 1467px lightgray, 1121px 1522px lightgray, 750px 1489px lightgray, 654px 595px lightgray, 29px 518px lightgray, 1564px 98px lightgray, 475px 1899px lightgray, 622px 1441px lightgray, 886px 801px lightgray, 1412px 558px lightgray, 800px 1330px lightgray, 540px 519px lightgray, 1916px 298px lightgray, 605px 331px lightgray, 399px 821px lightgray, 1331px 781px lightgray, 180px 146px lightgray, 435px 1759px lightgray, 1501px 456px lightgray, 793px 1748px lightgray, 1627px 1365px lightgray, 1538px 1167px lightgray, 1429px 1707px lightgray, 1710px 1285px lightgray, 944px 856px lightgray, 951px 1205px lightgray, 1513px 66px lightgray, 1368px 420px lightgray, 821px 1768px lightgray, 1764px 1707px lightgray, 102px 1616px lightgray, 1645px 1279px lightgray, 204px 314px lightgray, 954px 1865px lightgray, 1407px 1721px lightgray, 1044px 553px lightgray, 1906px 1629px lightgray, 1187px 764px lightgray, 424px 377px lightgray, 1132px 1564px lightgray, 1659px 1609px lightgray, 1900px 275px lightgray, 1929px 136px lightgray, 1552px 111px lightgray, 706px 91px lightgray, 1934px 112px lightgray, 260px 29px lightgray, 39px 122px lightgray, 221px 1809px lightgray, 1916px 325px lightgray, 742px 1814px lightgray, 1191px 1280px lightgray, 191px 717px lightgray, 14px 1553px lightgray, 1976px 1065px lightgray, 1589px 1869px lightgray, 1722px 1035px lightgray, 1947px 1148px lightgray, 286px 1899px lightgray, 1563px 947px lightgray, 716px 1205px lightgray, 654px 717px lightgray, 870px 574px lightgray, 639px 1198px lightgray, 431px 113px lightgray, 392px 683px lightgray, 777px 930px lightgray, 911px 529px lightgray, 1835px 413px lightgray, 237px 350px lightgray, 1165px 828px lightgray, 1746px 1567px lightgray, 153px 670px lightgray, 1286px 1220px lightgray, 448px 1398px lightgray, 1087px 1636px lightgray, 546px 986px lightgray, 715px 57px lightgray, 1278px 6px lightgray, 1141px 288px lightgray, 981px 682px lightgray, 1504px 1257px lightgray, 1730px 580px lightgray, 4px 222px lightgray, 1007px 897px lightgray, 624px 567px lightgray, 793px 1469px lightgray, 1669px 999px lightgray, 1846px 1509px lightgray, 1566px 1280px lightgray, 1938px 1397px lightgray, 10px 461px lightgray, 1071px 1073px lightgray, 835px 1733px lightgray, 1508px 1048px lightgray, 1463px 446px lightgray, 1728px 840px lightgray, 1523px 789px lightgray, 1912px 1482px lightgray, 104px 895px lightgray, 1303px 479px lightgray, 379px 1846px lightgray, 1287px 1286px lightgray, 1639px 323px lightgray, 1581px 1840px lightgray, 1261px 508px lightgray, 1230px 401px lightgray, 1592px 388px lightgray, 1750px 201px lightgray, 322px 1512px lightgray, 1394px 1329px lightgray, 1048px 380px lightgray, 535px 1166px lightgray, 444px 545px lightgray, 646px 1571px lightgray, 1494px 1934px lightgray, 92px 1398px lightgray, 1917px 1426px lightgray, 805px 1092px lightgray, 979px 916px lightgray, 1708px 152px lightgray, 1317px 522px lightgray, 1170px 684px lightgray, 343px 708px lightgray, 755px 885px lightgray, 1487px 1824px lightgray, 1160px 835px lightgray, 1586px 1729px lightgray, 236px 836px lightgray, 1257px 1590px lightgray, 1527px 649px lightgray, 450px 1554px lightgray, 1391px 714px lightgray, 422px 828px lightgray, 681px 1359px lightgray, 773px 571px lightgray, 1935px 1352px lightgray, 757px 591px lightgray, 1040px 743px lightgray, 182px 1508px lightgray, 1952px 1722px lightgray, 58px 868px lightgray, 1340px 338px lightgray, 450px 49px lightgray, 1069px 1013px lightgray, 1053px 640px lightgray, 1591px 1232px lightgray, 603px 1085px lightgray, 855px 1470px lightgray, 1017px 1931px lightgray, 788px 392px lightgray, 737px 978px lightgray, 1370px 116px lightgray, 1466px 1429px lightgray;
    background: 0 0;
}

#bubble3,
#bubble3:after {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 515px 676px 1px lightgray, 300px 146px 1px lightgray, 1776px 493px 1px lightgray, 1990px 1286px 1px lightgray, 1420px 40px 1px lightgray, 643px 1165px 1px lightgray, 1562px 225px 1px lightgray, 1502px 286px 1px lightgray, 1586px 1268px 1px lightgray, 136px 344px 1px lightgray, 384px 943px 1px lightgray, 1692px 1048px 1px lightgray, 1368px 282px 1px lightgray, 1833px 1997px 1px lightgray, 401px 1120px 1px lightgray, 686px 671px 1px lightgray, 396px 431px 1px lightgray, 57px 1561px 1px lightgray, 1866px 1761px 1px lightgray, 1395px 1622px 1px lightgray, 723px 1699px 1px lightgray, 1328px 1129px 1px lightgray, 995px 1582px 1px lightgray, 1318px 1388px 1px lightgray, 1404px 268px 1px lightgray, 1922px 771px 1px lightgray, 87px 829px 1px lightgray, 892px 1295px 1px lightgray, 1883px 1780px 1px lightgray, 1851px 147px 1px lightgray, 853px 115px 1px lightgray, 1185px 18px 1px lightgray, 59px 1394px 1px lightgray, 209px 1341px 1px lightgray, 1350px 359px 1px lightgray, 690px 1828px 1px lightgray, 762px 1546px 1px lightgray, 1816px 1715px 1px lightgray, 989px 956px 1px lightgray, 1280px 1979px 1px lightgray, 1115px 1686px 1px lightgray, 979px 1135px 1px lightgray, 1504px 1742px 1px lightgray, 827px 1660px 1px lightgray, 1666px 1199px 1px lightgray, 1293px 589px 1px lightgray, 236px 1070px 1px lightgray, 426px 1028px 1px lightgray, 1402px 313px 1px lightgray, 649px 1666px 1px lightgray, 1796px 154px 1px lightgray, 356px 354px 1px lightgray, 1365px 777px 1px lightgray, 838px 1539px 1px lightgray, 504px 1477px 1px lightgray, 1524px 801px 1px lightgray, 1351px 1186px 1px lightgray, 1863px 641px 1px lightgray, 313px 1433px 1px lightgray, 1076px 1065px 1px lightgray, 1135px 706px 1px lightgray, 1879px 1372px 1px lightgray, 854px 1035px 1px lightgray, 1970px 1087px 1px lightgray, 700px 1866px 1px lightgray, 1810px 783px 1px lightgray, 1281px 1807px 1px lightgray, 692px 795px 1px lightgray, 1571px 1816px 1px lightgray, 843px 946px 1px lightgray, 1253px 1771px 1px lightgray, 1780px 1372px 1px lightgray, 1993px 1236px 1px lightgray, 1807px 567px 1px lightgray, 1379px 1251px 1px lightgray, 276px 688px 1px lightgray, 1129px 26px 1px lightgray, 478px 166px 1px lightgray, 1221px 1355px 1px lightgray, 488px 721px 1px lightgray, 1517px 1594px 1px lightgray, 1554px 1975px 1px lightgray, 836px 1387px 1px lightgray, 1499px 1900px 1px lightgray, 517px 188px 1px lightgray, 395px 1285px 1px lightgray, 878px 1746px 1px lightgray, 475px 1493px 1px lightgray, 1365px 1628px 1px lightgray, 85px 405px 1px lightgray, 193px 61px 1px lightgray, 1884px 1082px 1px lightgray, 679px 1642px 1px lightgray, 1130px 1002px 1px lightgray, 1816px 188px 1px lightgray, 1469px 182px 1px lightgray, 1288px 192px 1px lightgray, 1846px 821px 1px lightgray, 636px 1617px 1px lightgray, 1819px 1545px 1px lightgray;
}

#bubble2:after,
#bubble3:after,
#bubble:after {
    content: "";
    position: absolute;
    top: 2000px;
    background: 0 0;
}

#bubble {
    animation: animBubble 42s linear infinite;
}

#bubble2 {
    animation: animBubble1 28s linear infinite;
}

#bubble3 {
    animation: animBubble2 14s linear infinite;

}

@keyframes animBubble {
    0%   { transform: translate( calc(100vw * -0.20 ), calc(100vh * -4.0 )); opacity: 0.4;}
    100% { transform: translate( calc(100vw * 0.20 ), calc(100vh * -2.0 )); opacity: 1;}
}

@keyframes animBubble1 {
    0%   { transform: translate( calc(100vw * -0.22 ), calc(100vh * -3.5 )) scale(1.6); opacity: 0.4;}
    100% { transform: translate( calc(100vw * 0.22 ), calc(100vh * -1.5 )) scale(1.6); opacity:1;}
}

@keyframes animBubble2 {
    0%   { transform: translate( calc(100vw * -0.25 ), calc(100vh * -3.0 )) scale(2); opacity: 0.4;}
    100% { transform: translate( calc(100vw * 0.25 ), calc(100vh * -1.0 )) scale(2); opacity: 1;}
}
</style>


それではデモページを用意したのでご覧ください。


 CSS Snowのデモを見る


少しぎこちない動きがありますが、ご容赦下さい。


2020年12月26日追記

さじさんにこの記事を紹介したら、下記ブログにこのCSSを埋め込んで頂きました。

背景が白でもいい感じで雪が降っていたので良かったです。


サンタがいるそうです。 - ゆるっと広告業界

サンタがいるそうです。 - ゆるっと広告業界

こんばんは、さじです。 メリクリです。 アイコン使って、カード作りました。 Twitterにツイートしたんですけど Twitterやってない人もいますもんね。 今夜、フライトレコーダーでは サンタが追跡されています。 検索窓で「サンタ」と入れると 今どこを飛んでるのかがわかります。 便名にも注目です(笑)。 www.flightradar24.com 良い聖夜を! さじ 雪降らせるCSSをTwitterで教えてもらったのでまるっとコピペしちゃいました!Bloggerのあトんさんありがとうございます! www.heavy-peat.com


次はCanvasで雪を降らせる方法の紹介です。


Canvasで雪を降らせる方法-その1

CanvasとはHTML5とJavaScriptを使って図形を描くための仕様ですが、はてなブログやBloggerはHTML5なのでCanvasを使うことができます。


しかし、管理人はCanvasは不勉強で知識はほぼありません。


真似してみるのが近道なので、Webできれいな雪景色を表現しているアニメーションを探してみたところいくつか見つけることができました。


TechRachoさんはでjsfiddle.netで、ツクログさんはCodePenでソースコードを公開しているので、興味がある方はご覧になっては如何でしょうか。


canvas上に雪を降らせる方法

canvas上に雪を降らせる方法

JavaScriptでcanvas上に雪を降らせる方法です。


クリスマスだしcanvasで雪を降らせるJS書いてみた|TechRacho by BPS株式会社

クリスマスだしcanvasで雪を降らせるJS書いてみた|TechRacho by BPS株式会社

こんにちは、デザイナーのスギヤマです。 今日は、クリスマスイブですね。 個人的にクリスマスは静かに雪が降っていて、綺麗と言ったイメージがあります。 なので気分だけでもそんな雰囲気を味わうべく、色々参考にしながらcanvasの勉強を兼ねて雪を振らせるJSを書いてみました。 以下で簡単説明していきます。 サンプルコード サンプルおよび記事トップ写真 : 東京駅丸の内正面通りからの夜景 色々準備する canvasを使うための準備をしていきます。 今回はブラウザーのウィンドウにフィットする様に表示させる方向で進めます。 canvasの表示領域は、設定しないと可変にならないようなので、 リサイズイベントを検知してcanva […]


JavaScriptを読むと、どちらも基本的な流れは同じなのですが、ツクログさんの方が細かいところまで作り込まれているようです。


実装方法

デモページに埋め込んだHTMLです。 

コード
<canvas id="canvas"></canvas>

<style type="text/css">
    #canvas {
        position: fixed;
        top: 0;
        left: 0;
    }
</style>

<script>// <![CDATA[
(() => {
  
  //requestAnimationFrameのベンダープレフィクス
  const requestAnimatoinFrame = window.requestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
  
  //ウィンドウサイズ
  let width = window.innerWidth;
  let height = window.innerHeight;

  //雪が降るスピード
  //レイヤー毎にスピードを変える
  let speed1 = null;//getRandomInt(0, 0.4);
  let speed2 = null;//getRandomInt(0.4, 1);
  let speed3 = null;//getRandomInt(1, 2);
  
  //雪片のサイズ
  let size1 = Math.min(width, height) / 380;
  let size2 = Math.min(width, height) / 200;
  let size3 = Math.min(width, height) / 100;
  
  //雪片の座標
  let x = null;//getRandomInt(0, width);
  let y = null;//getRandomInt(0, height * 0.4);
  
  //雪の集合を含むレイヤーとなる配列
  const snows1 = [];//1層目のレイヤー(一番奥)
  const snows2 = [];//2層目のレイヤー(真ん中)
  const snows3 = [];//3層目のレイヤー(先頭)
  
  //canvasに関するクラス
  class Canvas {

    constructor() {

      //#canvasの参照
      this.elem = document.getElementById('canvas');

      //canvasのコンテキストを取得
      this.ctx = this.elem.getContext('2d');
  
      //ウィンドウサイズをcanvasのサイズとする
      this.elem.width = width;
      this.elem.height = height;

      //ウィンドウがリサイズされるとresizeメソッドが実行される
      window.addEventListener('resize', () => this.resize());
    }

    //canvasをリサイズ
    resize() {

      //canvasのサイズを更新
      this.elem.width = width = window.innerWidth;
      this.elem.height = height = window.innerHeight;
    }
  }

  //canvasオブジェクトを生成
  const canvas = new Canvas;

  //雪片に関するクラス
  class Snowflake {
    
    constructor(x, y, size, speed){

      //雪片の座標
      this.x = x;
      this.y = y;

      //雪片のサイズ
      this.size = size;

      //雪片のスピード
      this.speed = speed;
      
      //雪片の振り幅
      this.swingWidth = 0.2;
    }
    
    //雪片を描画するメソッド
    draw(){
      const ctx = canvas.ctx;
      
      //パスを初期化
      ctx.beginPath();
      
      //円グラデーションを指定
      //http://www.htmq.com/canvas/createRadialGradient.shtml
      const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
      gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');//中心
      gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
      gradient.addColorStop(1, 'rgba(255, 255, 255, 0.1)');//外側

      //塗りをグラデーションにする
      ctx.fillStyle = gradient;
      
      //座標(x, y)に半径sizeの円弧を描く
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      
      //円弧を塗りつぶす
      ctx.fill();
      
      //パスを閉じる
      ctx.closePath();
    }
    
    //雪片を動かすメソッド
    move() {
      
      //moveメソッドが実行されたときのウィンドウのサイズを取得
      //width = window.innerWidth;
      //height = window.innerHeight;
      
      //ラジアン
      const rad = this.y * Math.PI / 180;
      
      //雪片をふらふらと左右に揺らしながら降らす
      this.x -=  Math.sin(rad * this.speed) * this.swingWidth - width / 1600;///getRandomInt(0, 0.5)*Math.sin(rad) * this.swingWidth
      this.y += this.speed;

      //雪片が画面下に隠れたら
      if (this.y > height || this.x < 0) {

        //隠れた雪片を先頭に戻す
        this.x = getRandomInt(0, width);
        this.y = 0;
      }
      
      //雪片を描画する
      this.draw();
    }
    
    //雪片を再配置・リサイズするメソッド
    resize(size, x, y){
      
      //再配置
      this.x = x;
      this.y = y;
      
      //リサイズ
      this.size = size;
    }
  }
  
  //全体を初期化する関数
  function init() {
  
    //レイヤーとなる配列に雪片のオブジェクトをwidth / 8個追加して雪の集合を3つ作る
    for (let i = 0; i < width /5; i++) {
      snows1.push(new Snowflake(x = getRandomInt(0, width), y = getRandomInt(0, height), 2, speed1 = getRandomInt(1, 2) * width / 1000));
    }
    for (let i = 0; i < width / 20; i++) {
      snows2.push(new Snowflake(x = getRandomInt(0, width), y = getRandomInt(0, height), 4, speed2 = getRandomInt(3, 4) * width / 1000));
    }
    for (let i = 0; i < width / 50; i++) {
      snows3.push(new Snowflake(x = getRandomInt(0, width), y = getRandomInt(0, height), 6, speed3 = getRandomInt(5, 6) * width / 1000));
    }
    
    //全レイヤーの雪を降らせる
    run();
  }
  
  //初期化
  init();
  
  //全レイヤーの雪を降らせる関数
  function run() {
    
    //描画されていた内容を全て消去する
    canvas.ctx.clearRect(0, 0, width, height);
    
    //雪を動かす
    for (let i = 0; i < snows1.length; i++) {
      snows1[i].move();
    }
    for (let i = 0; i < snows2.length; i++) {
      snows2[i].move();
    }
    for (let i = 0; i < snows3.length; i++) {
      snows3[i].move();
    }
    
    //run関数を繰り返し実行
    requestAnimationFrame(run);
  }
  
  //雪をリサイズする関数
  function resize() {
    
    //ウィンドウサイズを更新
    width = window.innerWidth;
    height = window.innerHeight;
  
    
    //全ての雪片を再配置・リサイズ
    for (let i = 0; i < snows1.length; i++) {
      snows1[i].resize(2, x = getRandomInt(0, width) , y = getRandomInt(0, height));
    }
    for (let i = 0; i < snows2.length; i++) {
      snows2[i].resize(4, x = getRandomInt(0, width) , y = getRandomInt(0, height));
    }
    for (let i = 0; i < snows3.length; i++) {
      snows3[i].resize(6, x = getRandomInt(0, width) , y = getRandomInt(0, height));
    }
  }
  
  //ウィンドウがリサイズされるとresize関数が実行される
  window.addEventListener('resize', () => resize());
  
   //min~maxのランダムな値を取得する関数
  function getRandomInt(min, max) {
    return (Math.random() * (max - min + 1)) + min;
  }
  
})();
// ]]>
</script>

なおデモページではツクログさんのコードを実装してみました。

ツクログさん、とても参考になりました。ありがとうございます。


それではデモページをご覧ください。


 Canvas Snowのデモを見る


最初に説明したCSSで雪を降らせる方法も同じですが、奥行き感を出すために3つのレイヤーが使われてます。

工夫すれば2Dでも、きれいな雪を降らせることが出来るのが良いですね。


Canvasで雪を降らせる方法-その2 

次に紹介するのは、3DのSnowです。

何が3Dなのかはマウスをグリグリ動かして下さい。

雪がマウスに追従して立体的に動き回ると思います。


ぷらすぶろぐさんの「今年は迫力の3Dでワードプレスに雪を降らす」を見てから、いつかやってみようと冬になるのをじーっと待ってました。(笑)


今年は迫力の3Dでワードプレスに雪を降らす

今年は迫力の3Dでワードプレスに雪を降らす

雪のシーズン到来ということで、ブログに季節感をプラスする雪を降らせてみました。HTML5のcanvasに対応したブラウザなら、このページには既に雪がチラチラしていると思います。(降ってないならおしてみて)JavaScriptの3Dライブラリ『Three.js』で描画されており、雪は立体的に舞います。マウスの動きにも反


実装方法

JavaScript HTML5 Canvas Snow in 3D 」のサイトでSeb Lee-DelisleさんがGitHubで公開しているJavaScriptと画像を使用します。

デモページに埋め込んだHTMLです。

コード
<script src="https://blog-imgs-135.fc2.com/z/r/u/zru/ThreeCanvas.js" type="text/javascript"></script>
<script src="https://blog-imgs-135.fc2.com/z/r/u/zru/Snow.js" type="text/javascript"></script>

<style type="text/css">
  #snow_canvas{ 
    position: fixed;
    top:0;
    left: 0;
    }
</style>

<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var container;
var particle;
var camera;
var scene;
var renderer;

var mouseX = 0;
var mouseY = 0;
var snownum = 500;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var particles = []; 
var particleImage = new Image();
particleImage.src = 'https://blog-imgs-135.fc2.com/z/r/u/zru/snow.png'; 

function init() {
    container = document.createElement('div');
    container.id = 'snow_canvas'; 
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
    camera.position.z = 1000;

    scene = new THREE.Scene();
    scene.add(camera);
        
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
        
    for (var i = 0; i < snownum; i++) {
        particle = new Particle3D( material);
        particle.position.x = Math.random() * 2000 - 1000;
        particle.position.y = Math.random() * 2000 - 1000;
        particle.position.z = Math.random() * 2000 - 1000;
        particle.scale.x = particle.scale.y =  1;
        scene.add( particle );
        
        particles.push(particle); 
    }

    container.appendChild( renderer.domElement );

    container.addEventListener( 'click', function(){container.parentNode.removeChild(container)}, false );
    container.addEventListener( 'touchstart', function(){container.parentNode.removeChild(container)}, false );
    container.addEventListener( 'mousemove', onDocumentMouseMove, false );
    container.addEventListener( 'touchstart', onDocumentTouchStart, false );
    container.addEventListener( 'touchmove', onDocumentTouchMove, false );
    setInterval( loop, 1000 / 60 );
    
}

function onDocumentMouseMove( event ) {
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart( event ) {
    if ( event.touches.length == 1 ) {
        event.preventDefault();
        mouseX = event.touches[ 0 ].pageX - windowHalfX;
        mouseY = event.touches[ 0 ].pageY - windowHalfY;
    }
}

function onDocumentTouchMove( event ) {
    if ( event.touches.length == 1 ) {
        event.preventDefault();
        mouseX = event.touches[ 0 ].pageX - windowHalfX;
        mouseY = event.touches[ 0 ].pageY - windowHalfY;
    }
}

function loop() {

for(var i = 0; i<particles.length; i++)
    {
        var particle = particles[i]; 
        particle.updatePhysics(); 

        with(particle.position)
        {
            if(y<-1000) y+=2000; 
            if(x>1000) x-=2000; 
            else if(x<-1000) x+=2000; 
            if(z>1000) z-=2000; 
            else if(z<-1000) z+=2000; 
        }               
    }

    camera.position.x += ( mouseX - camera.position.x ) * 0.05;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
    camera.lookAt(scene.position); 

    renderer.render( scene, camera );
}

if (window.addEventListener) {
  window.addEventListener("load", init, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", init);
} else  {
  window.onload = init;
}
</script>

Snow.jsThreeCanvas.jsParticleSmoke.pngのファイルを適当なCDNサーバにアップして下さい。


なお、背景が白色の場合はぷらすぶろぐさんのpng画像を借りた方がよいようです。

実はこのページにもSnow in 3Dは仕込んでありますが、昼12時から夜中0時の間のみ雪が降るように小細工してます。

当ページに午前中に訪問された方は、午後もう一度来て見て下さい。


それではデモページをご覧ください。


 3D Snowのデモを見る


z-indexを-1に設定すると、雪は背面に移動し要素をクリック出来るのですが、面白くないので止めました。

ぷらすぶろぐさんが記事で説明されてますが、マウスクリックで雪が消えるように同じスクリプトを使用させて頂きました。


注意 2022年12月26日 追記

当ブログ及び当ブログで引用させて頂きました元記事で使用しているpng画像は直リンクは避け、ご自身が管理元の場所にコピーして使用して頂くようお願い致します。



まとめ

CSSやCanvasを使うと、ブログを雪景色にすることができ、季節に応じてサイトの雰囲気を変えることができます。

CSSはコーディング言語ですが上手く使うと面白いことができ勉強になります。

JavaScriptもCanvasのフレームワークで使うと、図形が簡単に描写でき便利だということが分かりました。

いつかGPUを使ったWebGLを調べて遊んでみようと思います。


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

https://t.co/h0N170Fj8b

最近寒い日が続きますが、冬限定でブログに雪を降らせて遊んでみた記事です。

良かったら雪遊びをご覧下さい。#JavaScript #CSS #Canvas #Blogger

— heavy-peat|Web CodingとAV好きなエンジニア (@AfterWork_Lab) December 1, 2022

それでは今回の記事はこれでおしまい。

Next Post Previous Post
Comment
Please Enter Comments in Light mode
comment url