JavaScriptで文字をピョンピョン跳ねさせる

文字をピョンピョンさせてみる

JavaScript

function randomCharactor(c) {

    //跳ねさせる要素をすべて取得
    var randomChar = document.getElementsByClassName(c);

    //for で総当たり
    for (var i = 0; i < randomChar.length; i++) {

        //クロージャー
        (function(i) {

            //i 番目の要素、テキスト内容、文字列の長さを取得
            var randomCharI = randomChar[i];
            var randomCharIText = randomCharI.textContent;
            var randomCharLength = randomCharIText.length;

            //何番目の文字を跳ねさせるかをランダムで決める
            var Num = ~~(Math.random() * randomCharLength);

            //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
            var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
            randomCharI.innerHTML = newRandomChar;

            //アニメーションが終わったら再び関数を発火させる
            document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
                randomCharactor(c)
            }, false)
        })(i)
    }
}

//クラス名が pyonpyon のクラスを跳ねさせる
randomCharactor("pyonpyon");

JavaScript での最大のポイントは、animaitionend イベントを使う事で無限ループを可能にしているところです。

ピョンと跳ねるアニメーションをする文字をランダムで決める

アニメーションをさせるためクラス名ををその文字に付ける

クラス名が付いたので CSS でアニメーションする

アニメーションが終わったことをフラグにして再びランダムで飛び跳ねる文字を選択する

以下無限ループ

という構造になっています。JavaScript で無限ループをさせるには setInterval を使うことが多いのですが、今回はアニメーションをさせてますので、その終わりをキャッチできる animationend イベントを上手に使ってみました。

CSS

.pyonpyon span {
    animation: pyon 0.3s linear;
    position: relative;
}

@keyframes pyon {
    0% {top: 0}
    50% {top:-17px}
    100%{top: 0}
}

HTML

文字が<span class="pyonpyon">ピョンピョン</span>とランダムで跳ねます。

JavaScript の最後の行を見るとわかると思うのですが、跳ねさせるクラス名は自由に選ぶことが出来ます。今回は pyonpyon というクラス名を付けましたが別の名前でも構いません。JavaScript は跳ねさせることには全く関与しておらず、「文字列中の一文字をランダムで選び span タグで囲む」という事をしているだけです。

CSS は span がインライン要素のためポジションによる位置移動をさせています。position: relative は必須です。

デモ

冒頭ですでに跳ねているのですが一応デモを作りました。

クラス名が pyonpyon の span で囲った部分だけピョンピョンと跳ねています。

HTML 配下の構造になっています。

HTML

クラス名は <span class="pyonpyon">pyonpyon</span> の span で囲った部分だけ<span class="pyonpyon">ピョンピョン</span>と跳ねています。

前述のとおり JavaScript は文字をランダムで選ぶ仕事をしているだけなので、CSS を変更すればピョンピョン跳ねさせる以外にも色々アニメーションさせることが出来ます。

文字色をランダムで変える

文字をランダムで選んで色を変えています。

CSS、HTML、JavaScript の関数実行部分を変更すると実現可能です。

JavaScript

//最後の行のみ変更
randomCharactor("random-color");

CSS

.random-color span {
    animation: randomColor 0.3s linear;
}

@keyframes randomColor {
    0% {color: #333}
    10% {color: red}
    90% {color: red}
    100%{color: #333}
}

HTML

文字を<span class="pyonpyon">ランダムで選んで</span>色を変える効果

keyframes アニメーションの部分とポジションは今回は関係ないのでそこの部分だけ変更しています。

文字をランダムで選んで消す

文字をランダムで選んで透明にしています。

JavaScript

//最後の行のみ変更
randomCharactor("random-op");

CSS

.random-op span {
    animation: randomOp 0.3s linear;
}

@keyframes randomOp {
    0% {opacity: 1}
    50% {opacity: 0}
    100%{opacity: 1}
}

HTML

文字を<span class="random-op">ランダムで選んで</span>透明しています。

opacity を適用することで文字を消しています。

文字もっと高く跳ねさせる

文字をランダムで選んでもっと高くジャンプさせています。

JavaScript

//最後の行のみ変更
randomCharactor("high-jamp");

CSS

.high-jamp span {
    animation: highJamp 0.3s linear;
    position: relative;
}

@keyframes highJamp {
    0% {top: 0}
    50% {top: -50px}
    100%{top: 0}
}

HTML

文字を<span class="high-jamp">ランダムで選んで</span>もっと高くジャンプさせています。

keyframes アニメーションの top の値がジャンプの高さになるので、そこを大きくすればハイジャンプも可能です。

まとめ

CSS だけではなかなか難しい文字装飾を JavaScript の力を借りれば実現が出来ます。実際使えるか使えないかは置いておいて色々面白いです。

JavaScript を使っている割に地味なものが多いのですが、CSS を変えれば他にも出来そうなので幅は広がりそうです。アイデア次第ですね。