HTML、CSS、JSで雪を降らせる。

投稿日：2020年12月3日

季節柄、css 雪のクエリで本サイトを訪れる方が増えています。
PV数も右肩上がりです。
誠に、ありがとうございます。

2020.03.03

前回の桜の花びらが舞うアニメーションと同じように、DOM操作でCSSを書き換え、雪を降らせてみました。8個の雪の結晶の画像をラン...

上記サイトは、雪の結晶のpngデータをhtmlのDOMを書き換えて、ふわふわ舞っている感じを表現しています。
動きなどは同様ですが、今回は画像を使わず、CSSだけで雪を降らせてみます。

CSSで円を作り、それを雪と見立てて作ったのが以下になります。

ソースコードは下記。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>snowPowder</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main__container {
            width: 100%;
            height: 300px;
            background-color: #000;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
            transition-duration: 0.1s;
            transition-timing-function: ease;
        }
    </style>
</head>

<body>
    <div id="main__container"></div>
    <script>
        var winWidth = document.documentElement.clientWidth, //ウィンドウの横幅
            winHeight = document.documentElement.clientHeight; //ウィンドウの高さ

        var main = document.getElementById('main__container');

        for (var i = 1; i <= 40; i++) {
            var div = document.createElement('div'); //divを作成
            main.appendChild(div); //divを追加
            div.setAttribute('id', 'contents' + zeroPad(i));
            div.setAttribute('style', 'position:relative; background-color:#fff; border-radius:50%; top:-30px;');
            randomValue(div);
        }

        function randomValue(ele) {
            var multiArray = [1, -1]; //1か-1の配列
            var randomMulti = multiArray[Math.floor(Math.random() * multiArray.length)]; //1か-1をランダムに取得
            var maxSize = 9, //最大サイズ
                minSize = 3, //最小サイズ
                objSize = getRandomNum(maxSize, minSize), //サイズ 最大〜最小までのランダム値
                blurValue = getRandomNum(3, 0), //ボカシ量
                opacityValue = getRandomFloot(0.8, 0.5).toFixed(1), //透明度　※小数点第1位まで取得
                XSpeedNum = getRandomFloot(2, 0), //Xの移動量
                YSpeedNum = getRandomFloot(4, 2), //Y座標の移動量
                ZSpeedNum = getRandomFloot(0.025, 0); //Z座標の移動量

            ele.style.width = objSize + 'px';
            ele.style.height = objSize + 'px';
            ele.style.margin = (maxSize - objSize) / 2 + 'px';
            ele.style.filter = 'blur(' + blurValue + 'px)';
            ele.style.opacity = opacityValue;

            var YNum = -40;
            var XNum = 0;
            var ZNum = 0;

            (function animeLoop() {
                var requestAnime = window.requestAnimationFrame(animeLoop);
                XNum += XSpeedNum;
                YNum += YSpeedNum;
                ZNum += ZSpeedNum;
                ele.style.top = YNum + 'px';
                ele.style.left = XNum * randomMulti + 'px';
                ele.style.transform = 'scale(' + ZNum + ',' + ZNum + ')';

                if (YNum >= 300) {
                    window.cancelAnimationFrame(requestAnime);
                    return randomValue(ele);
                }
            })();

            return ele;
        }

        //////////// 関数 ////////////
        function zeroPad(zeroNum) { //ゼロパッド取得関数
            var zeroNum = ('000' + zeroNum).slice(-3);
            return zeroNum;
        }

        function getRandomNum(max, min) { //ランダム値取得関数
            var ranNum = Math.floor(Math.random() * (max + 1 - min) + min);
            return ranNum
        }

        function getRandomFloot(max, min) { //ランダム値取得関数 小数点第1位
            var ranFlootNum = Math.random() * (max - min) + min;
            return ranFlootNum;
        }

    </script>
</body>

</html>

▲pure Scriptで少々古いJSです。
maxSizeの大きさと、for文内での数にもよりますが、あまり大きいと円がイビツになります。
コピペしてご自由にお使いください。
※何か問題が発生しても責任は負いかねます。

まとめ

最近、Reactを学び始めたので、折を見てReactで記述してみたいと思います。
それと、この記事を書くのと同じ頃にAfter Effectでも同様のムービーを作ったので、できたらアップします。

最後まで読んでくださりありがとうございました。

onebitious's BLOG

2021.12.12