色々なスクリプトで雪を降らす

2018-12-12
JavaScript

12月が近くなると、jQueryを使って、自分で雪を降らせてみたがよくアクセスされます。
ほかのscriptも気になったので試してみました。

とりあえず、このページで降らせるようにしてみました。

（2018.12.26追記）
SnowJs、Flurry、jQuery Let It Snowを追加しました。

Snowfall jquery plugin

jQueryのプラグインです。
script自体は使いやすいですが、2016年から更新されていないようです。
雪を増やすと、重くなりやすい気がします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/jquery-snowfall/dist/snowfall.jquery.min.js"></script>
</head>
<body>
    <button onclick="sfjqStart()">雪を降らす</button>
    <button onclick="sfjqImgStart()">画像の雪を降らす</button>
    <button onclick="sfjqEnd()">雪を止める</button>
    <script>
        // 雪を降らす
        function sfjqStart() {
            $(document)
            .snowfall('clear')
            .snowfall({
                flakeColor: '#0065b2',
                flakeCount: 50,
                round: true,
                minSize: 6,
                maxSize: 20,
                minSpeed: 2,
                maxSpeed: 10
            });
        }
        // 画像の雪を降らす
        function sfjqImgStart() {
            $(document)
            .snowfall('clear')
            .snowfall({
                image: './snow.png',
                flakeCount: 50,
                minSize: 10,
                maxSize: 32,
                minSpeed: 2,
                maxSpeed: 10
            });
        }
        // 雪を止める
        function sfjqEnd() {
            $(document).snowfall('clear');
        }
    </script>
</body>
</html>

magic-snowflakes

hcodes/snowflakes

依存しているライブラリがなく、単体で動きます。
とても軽量です。
SVGで雪の結晶が設定してあるFullと、設定されていないLightがあります。
ただ、デバイスによっては、ページの上にある雪が見えてしまいます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="./node_modules/magic-snowflakes/dist/snowflakes.min.js"></script>
</head>
<body>
    <button onclick="msfStart()">雪を降らす</button>
    <button onclick="msfEnd()">雪を止める</button>
    <script>
        // オプション設定
        var msfProp = {
            color: '#0065b2',
            wind: true,
            speed: 3,
            minSize: 10,
            maxSize: 32,
            rotation: false
        };
        var msf;
        // 雪を降らす
        function msfStart() {
            if (msf) {
                msf.start();
            } else {
                msf = Snowflakes(msfProp);
            }
        }
        // 雪を止める
        function msfEnd() {
            if (msf) {
                msf.destroy();
                msf = null;
            }
        }
    </script>
</body>
</html>

Canvas Snow

cycdpo/canvas-snow

上記のものとは違い、Canvasベースになっています。
雪の形や色などの設定がないので、白ベースのサイトでは使いにくいです。
今回は、背景に色をつけてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="./node_modules/canvas-snow/build/CanvasSnow.min.js"></script>
    <style>
        #snowWrapper {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 1000;
        }
        #snowWrapper.bgDark {
            background: rgba(0, 0, 0, 0.3)
        }
    </style>
</head>
<body>
    <div id="snowWrapper"></div>
    <button onclick="csStart()">雪を降らす</button>
    <button onclick="csEnd()">雪を止める</button>
    <script>
        // オプション設定
        var csProp = {
            context: '#snowWrapper',
            cell: 100
        }
        var bgClass = document.querySelector(csProp.context).classList;
        var canvasSnow = new CanvasSnow(csProp).init();
        // 雪を降らす
        function csStart() {
            canvasSnow.stop();
            canvasSnow.start();
            bgClass.add('bgDark');
        }
        // 雪を止める
        function csEnd() {
            canvasSnow.stop();
            bgClass.remove('bgDark');
        }
    </script>
</body>
</html>

SnowJs

HermannBjorgvin/SnowJs

スクリプトとHTMLを配置するだけで動作します。
オプションがなく、canvasよりも下にソースを置かないと動きません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style>
        #snow.bgDark {
            background: rgba(0, 0, 0, 0.3)
        }
    </style>
</head>

<body>
    <canvas id="snow"></canvas>
    <button onclick="hBSnowStart()">雪を降らす</button>
    <button onclick="hBSnowEnd()">雪を止める</button>
    <script src="./SnowJs/snow.js"></script>
    <script>
        var hBSnowProp = document.querySelector('#snow');
        var hBSnowClass = hBSnowProp.classList;
        // 雪を降らす
        function hBSnowStart() {
            hBSnowProp.style.display = 'block';
            hBSnowProp.width = window.innerWidth;
            hBSnowProp.height = window.innerHeight;
            hBSnowProp.classList.add('bgDark');
        }
        // 雪を止める
        function hBSnowEnd() {
            hBSnowProp.style.display = 'none';
            hBSnowProp.classList.add('bgDark');
        }
        hBSnowEnd();
    </script>
</body>
</html>

Flurry

joshmcrty/Flurry

jQueryのプラグインです。
雪の文字や色を配列でランダムにできるのが面白いです。
固定位置の設定がないので、設置が面倒かもしれません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./Flurry/jquery.flurry.min.js"></script>
    <style>
        #flurry-cont {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 1000;
        }
        
        #flurry-cont-in {
            margin-left: -100%;
        }
    </style>
</head>
<body>
    <div id="flurry-cont">
        <div id="flurry-cont-in"></div>
    </div>
    <button onclick="flurryStart()">雪を降らす</button>
    <button onclick="flurryEnd()">雪を止める</button>
    <script>
        // オプション設定
        var flurryProp = {
            character: '❄❅❆*',
            color: ["#0065b2", "#AE3D63", "#EEE"],
            height: window.innerHeight,
            speed: 2000,
            wind: 200,
            windVariance: 220,
            frequency: 10,
            large: 40,
            small: 4
        }
        var flurryCont = '#flurry-cont-in';
        // 雪を降らす
        function flurryStart() {
            $(flurryCont).flurry(flurryProp);
        }
        // 雪を止める
        function flurryEnd() {
            $(flurryCont).flurry('destroy');
        }
    </script>
</body>
</html>

jQuery Let It Snow

peachananr/let_it_snow

canvasベースで動く、jQueryのプラグインです。
大量に降らす場合は、canvasの方が重くないと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./let_it_snow/jquery.let_it_snow.min.js"></script>
    <style>
        #letItSnow {
            position: fixed;
            left: 0;
            top: 0;
            pointer-events: none;
            z-index: 100;
        }
    </style>
</head>
<body>
    <canvas id="letItSnow"></canvas>
    <div class="paragraph">
        <button onclick="letItSnowImgStart()">画像の雪を降らす</button>
        <button onclick="letItSnowStart()">雪を降らす</button>
        <button onclick="letItSnowEnd()">雪を止める</button>
    </div>
    <script>
        // 画像の雪を降らす
        function letItSnowImgStart() {
            $('#letItSnow').show().let_it_snow({
                speed: 5,
                interaction: false,
                size: 8,
                count: 100,
                opacity: 0.2,
                windPower: 0,
                image: './snow.png'
            });
        }
        // 雪を降らす
        function letItSnowStart() {
            $('#letItSnow').show().let_it_snow({
                speed: 4,
                interaction: false,
                size: 10,
                count: 200,
                opacity: 0,
                color: "#0065b2",
                windPower: 2,
                image: false
            });
        }
        // 雪を止める
        function letItSnowEnd() {
            $('#letItSnow').hide();
        }
    </script>
</body>
</html>