JavaScriptでキラキラと星を降らせる

星をキラキラ降らせる

現にこのページでもキラキラふっていると思いますので見にくいかもしれませんが、JavaScript で大きさ、位置、遅延時間をランダムにしてパラパラと降ってくるようにしています。

JavaScript

//星を作る関数。n は星の個数。多いほど星が多く振ります。
function starMaker(n) {
    var star = document.createElement("div");
    star.className = "star";
    star.textContent = "★";
    for(var i = 0; i < n; i++) {
        starSet(star);
    }
}

//星のセッティングをする関数。
function starSet(clone) {
    var starClone = clone.cloneNode(true);
    var starStyle = starClone.style;

    //星の位置（left）、アニメーションの遅延時間（animation-delay）、サイズ（font-size）をランダムで指定
    starStyle.left = 100 * Math.random() + "%";
    starStyle.animationDelay = 8 * Math.random() + "s";
    starStyle.fontSize = ~~(50 * Math.random() + 20) + "px";
    document.body.appendChild(starClone);

    //星一つのアニメーションが終わったら新しい星を生成
    starClone.addEventListener("animationend", function() {
        this.parentNode.removeChild(this);
        var star = document.createElement("div");
        star.className = "star";
        star.textContent = "★";
        starSet(star);
    }, false)
}

//使用例。星を50個ふらせます。
starMaker(50)

アニメーションエンドイベントを使い、星が下まで落ちてきたらその星は消滅し、1個新しい星を生成しています。よって永遠に星が落ち続けることになります。

CSS はアニメーションがメインです。縦に動きアニメーションと横に回転するアニメーションの二つです。calc を使って位置を上手に設定することで上の橋から下の端まで移動してくれます。em 単位の使い方がキーポイントかもしれません。

CSS

.star {
    animation: kirakira 8s linear;
    color: yellow;
    display: inline-block;
    height: 1em;
    line-height: 1em;
    position: fixed;
    top: -1em;
    z-index: 1000;
}

@keyframes kirakira {
    0% {
        transform:translateY(0) rotateY(0);
    }
    100% {
        transform:translateY(calc(100vh + 1em)) rotateY(3600deg);
    }
}

デモ

下のフォームの数値を変えると降ってくる星の量を変更することが出来ます。色々変えてみてください。

あまりにも多くし過ぎるとブラウザがフリーズする危険性がありますので注意してください。また、星が邪魔だという場合は数値を0にするとなくなります。

starMaker(); //数値は星の数

まとめ

今はあまり見かけなくなりましたが、jQuery の流行り始めのころはよく見たエフェクトですね。CSS のアニメーションの部分を工夫すれば、雪をチラチラ降らせたり、葉っぱをヒラヒラ舞わせたりも出来そうです。

何にせよこんな露骨な使い方では嫌われますので使うときはオシャレに使いたいです。