JSアニメーション：文字の登場

投稿日：2023年05月10日 11時28分25秒
更新日：2023年05月10日 13時12分50秒

デモ

Addnew

エンジニア

説明・補足・注意事項

このようなアニメーションがなんて名前なのかわかりませんが、画面から文字が次々に降ってきたりわいてきたりするようなアニメーションです。

対象DOM

<p class="js-amination entryScaleChange fromBig">Addnew</p>
<p class="js-amination entryScaleChange fromSmall">エンジニア</p>

説明

js-amination：JSによるアニメーション対象DOM判定用

entryScaleChange：アニメーションの種類。sclaleの値を変更することで登場するので。

fromBig：entryScaleChangeのオプション。大きいのから小さくなって表示すると降ってきているように見える。

fromSmall：entryScaleChangeのオプション。小さいのから大きくなって表示すると沸いてきているに見える。

CSS

.js-animation{
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
.entryScaleChange{
    width:100%;
    white-space: nowrap;
    margin:unset;
    display: flex;
    justify-content: center;
    opacity: 0;

}
.entryScaleChange span{
    color: rgba(0,0,0);
    display: block;
    opacity: 0;
}
.entryScaleChange.fromBig span{
    transform: scale(5); /* 初期値 */
}
.entryScaleChange.fromSmall span{
    transform: scale(0.2); /* 初期値 */
}

説明

実はpタグのjs-animationスタイルは何も意味がない。
というのも、実際アニメーションするのはJSで作るpタグの子要素のspanタグだから。

pタグ内部のspanタグを横並びにするスタイルと、最初に文字が見えてしまわないように透明にするスタイルを適用。(display: noneで実装してしまうとその分のスペースまで消えてしまうので注意。アニメーションで表示する際に隣接する要素が動いているように見えてしまいます）

spanタグには透明とブロック要素にするスタイルを適用します。ブロック要素でないとscaleが効かないので注意してください。

最後にfromBig とfromSmall でscaleの初期値を設定します。
ここら辺は文字サイズなどで変わると思うので変更して使ってください。

JS：イベント定義

window.addEventListener('load', function(){
	
    let domStrs = document.querySelectorAll(".js-amination.entryScaleChange");
    
    if(domStrs.length > 0){
    	for(let idx = 0; idx <= domStrs.length -1 ; idx++){
    		setTimeout(() => {entryScaleChange(domStrs[idx]);}, (idx + 1) * 1000);
    	}
    }
});

説明

今回は画面表示時のキャッチコピーを出現させるアニメーション用だったため、load時に発火するような作りとなっています。
かつ、entryScaleChangeが複数行あっても対応できるようにdocument.querySelectorAll(“.js-amination.entryScaleChange”);としています。

複数行ある場合にタイミングをずらす（順番に出るようにする）ために、for文のインデックスをsetTimeout関数の引数に使っています。

ちなみにこのままだとページ内全ての対象アニメーションが動くことになります。
タイミング違いがあるならクエリを変えてください。

JS：アニメーション

function entryScaleChange(dom){

    let innerText = dom.innerText;
    let chars = [...innerText];

    const spans = [];
    chars.forEach(char =>{
        spans.push("<span class='js-animation'>" + char + "</span>")
    });

    dom.innerHTML = spans.join('');

    dom.style.opacity = 1;
    let domChars = dom.querySelectorAll("span");
    console.log(domChars);
    for(let idx = 0; idx <= domChars.length -1 ; idx++){

        sleep(idx * 10, async function(){
            setTimeout(()=>{
                console.log("setTimeout");
                domChars[idx].style.opacity = 1;
                domChars[idx].style.transform = "scale(1)";
            }, 1000);
        });
    }
}