株式会社コネクト開発雑記帳

今年最大の寒波とテレビで連日報道されますが、岩手県内でも各所で本格的な降雪になりましたね。

毎年のことですが雪の降り始めは道路状況も当然悪化し事故車を見かけることも間々あるものの、気温が-5℃くらいまで落ちてくると路面の雪も半端に溶けることがなくなり車の運転も安定してきます。

さて、雪を見ながらふと思い立ちホームページ上で雪の降るような演出を入れられる簡単なコードを書いてみました。

ざっくりと処理を説明すると、

 <div class="snow-wrapper"></div>

で枠を用意して、Jqueryで下記コードを書くと枠の中に500個くらいオブジェクトが生成されるので

$(function(){
    let count = 1;
    snowDroop=setInterval(function(){
        var random = Math.floor( Math.random() * 99 ) + 1;
        var size = Math.floor( Math.random() * 10 ) + 10;
        var type = Math.floor( Math.random() * 1 ) + 1;
        $('.snow-wrapper').append('');
        count++;
        if(count == 500){
            clearInterval(snowDroop);
        }
    } , 100);            
});

最後にCSSでレイアウトとアニメーションを入れる感じです。

.snow-wrapper{
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}
.drop{
    position: absolute;
    margin: auto;
    width:1em;
    height:1em;
    background:rgb(188, 214, 246);
    border-radius: 50%;
}
.fall1{
    animation: fall1 10s infinite linear;
}
.fall2{
    animation: fall2 10s infinite linear;
}
@keyframes fall1 {
    0%{
        top:-10%;
        transform: translateX(10px);
    }
    25%{
        transform: translateX(-10px);
    }
    50%{
        transform: translateX(10px);
    }
    75%{
        transform: translateX(-10px);
    }
    100%{
        top:100%;
        transform: translateX(10px);
    }
}
@keyframes fall2 {
    0%{
        top:-10%;
        transform: translateX(-10px);
    }
    25%{
        transform: translateX(10px);
    }
    50%{
        transform: translateX(-10px);
    }
    75%{
        transform: translateX(10px);
    }
    100%{
        top:100%;
        transform: translateX(-10px);
    }
}

表示画面サイズによってCSSで雪のサイズ変更が必要。PCで遊んでいたのでスマホだとボタ雪みたいになります。

思い付きで画面上それっぽく動くレベルにしただけなので、動作の安定性や処理の負荷などを考えると乱数の生成やオブジェクトの扱いについてもう少し精査すべきですけれど、単純に雪らしいものを降らすだけならこんな感じで実装できます。

CSSで作る雪オブジェクトにSVGファイルで用意した雪の結晶などを当てはめるとよりそれらしく見えるかもしれません。

皆さま雪道は気をつけましょう。