Top

JavaScriptでヒラヒラと落ち葉を舞わせる

JavaScript で星をキラキラと降らせたことがあるのですが、この記事では落ち葉をヒラヒラと舞わせます。応用編?ということで少しコードを改変してみます。

このほかにも「雪をチラチラ舞わす」や「紙吹雪をヒラヒラ降らす」なども出来そうです。

ochiba

落ち葉をヒラヒラ舞わせる

星を降らせた記事:JavaScriptでキラキラと星を降らせる

詳しくは上記記事を参考にしてください。

JavaScript

function ochibaMaker(n) {
    var ochiba = document.createElement("div");
    ochiba.className = "ochiba";
    ochiba.innerHTML = "🍂";
    for(var i = 0; i < n; i++) {
        ochibaSet(ochiba);
    }
}

function ochibaSet(clone) {
    var ochibaClone = clone.cloneNode(true);
    var ochibaStyle = ochibaClone.style;
    ochibaStyle.left = 100 * Math.random() + "%";
    ochibaStyle.animationDelay = 8 * Math.random() + "s";
    ochibaStyle.fontSize = ~~(20 * Math.random() + 10) + "px";

    //秋っぽい色にランダムで OSなどの環境により適用されない事があります
    switch(~~(3 * Math.random())) {
        case 0: var ochibaColor = "#91002C"; break;
        case 1: var ochibaColor = "#E8380D"; break;
        case 2: var ochibaColor = "#F39800"; break;
    }
    ochibaStyle.color = ochibaColor;

    document.body.appendChild(ochibaClone);
    ochibaClone.addEventListener("animationend", function() {
        this.parentNode.removeChild(this);
        var ochiba = document.createElement("div");
        ochiba.className = "ochiba";
        ochiba.innerHTML = "🍂;";
        ochibaSet(ochiba);
    }, false)
}

//使用例 落ち葉を50枚出します
ochibaMaker(50);

色をランダムで3色から選ばせるようにしたこと、文字コードの関係で innerHTML での文字挿入になっているところ、大きさ(font-size)のふり幅を小さくしたこと、以外は星を降らせるコードと変わりまりません。

CSS

.ochiba {
    animation: hirahira 8s linear;
    display: inline-block;
    height: 1em;
    line-height: 1em;
    position: fixed;
    top: -1em;
    z-index: 1000;
}

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

CSS に関してもクラス名を変更したこと以外はほぼ変更ありません。

まとめ

絵文字を使っているので少しリアルさに欠けるような気がするのですが、秋風にリメイクできました。色をランダムにしたりと応用も効くのが楽しいです。

絵文字ではなく SVG 画像などでやってあげた方がより落ち葉らしさを演出できるかもしれません。

  1. ホト

    色々いじって何とか使えるようにはなったのですが、
    どのように使わせていただけるかだけ教えていただければ幸いです。
    お忙しいところ恐縮ですが宜しくお願いします。

    2017-03-06 11:38Reply
    • どのようにとは具体的に何を答えればよろしいでしょうか。
      フッターにリンクのあるaboutページに書いてある以上のことは望みません。

      2017-03-06 22:14Reply