Top

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

昔良く見たあまりうれしくない系エフェクトの「何か降ってくる系エフェクト」を CSS のアニメーションなどを使い最新風?に書いてみました。星をキラキラと降らせます。

アニメーションを CSS に押し付けているので負荷が軽めかもしれません。

stars

星をキラキラ降らせる

現にこのページでもキラキラふっていると思いますので見にくいかもしれませんが、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 のアニメーションの部分を工夫すれば、雪をチラチラ降らせたり、葉っぱをヒラヒラ舞わせたりも出来そうです。

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

  1. js

    https://q-az.net/javascript-kirakira-stars-effect/
    とても素敵なアニメーションなので、参考にさせていただこうかと思い、上記に記載のJSとCSSをコピペさせてもらったのですが、アニメーションが始まりません。

    仕方がないのでソースコードすべてをhtmlの欄に張り付けたところ再現はできたのですが、
    どの部分が足りずに上記に記載のJSとCSSだけで実現できないかわからないのですが、
    どこか足りていない部分がありませんか?

    (削除)
    htmlを削除してもらうとアニメーションがなくなります。

    また、とても参考になるソースがたくさんありますがライセンス表記はどのようにしたらよろしいでしょうか?
    アドレスを記載すればフリーで商用に使わせていただいても、ここで紹介されているものは大丈夫でしょうか?

    2017-03-04 13:48Reply
    • JSコードは

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

      の部分から記述してもらわなければこのコードは動きません。全て必要です。

      商用利用に関しては一切の責任は負えないのでその点だけご了承いただければご自由にご利用いただいて構いません。JavaScriptコード自体をそのまま、または微改変を加えた状態で紹介される場合も特に制限は設けていませんがあまりいい気持ちがしないということだけ言っておきます。

      リンクの方は貼ってもらえればありがたいですが商用ということなので出来ればで構いません。

      またcodepenに当記事をそのまま記事内容(HTML)を貼っておられますが、これに関しては早急に削除していただきたく思います。aboutページ(https://q-az.net/about/)の著作権の項目にも書いて有ることなのでお願い致します。

      2017-03-04 15:03Reply