- 投稿日：2023年05月10日 11時28分25秒
- 更新日：2023年05月30日 13時28分36秒
JSアニメーション：文字の登場
デモ
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);
});
}
}引数
dom：対象の文字列をinnerTextに含んでいるDOM。
説明
引数のDOM.innerTextを一文字ずつspanタグで囲い、1秒後から0.1秒ずれて文字が表示されていく処理です。
「〇秒後から×秒ずれて」はsleep関数の第一引数と第二引数内setTimeout関数に第二引数の値を変えれば変更可能です。
アニメーション時間はCSSの方でかえてください。
この関数の注意すべきは引数DOMのスタイル「不透明度」を1にしているところです。
dom.style.opacity = 1;
これはCSSの説明で記載した、最初から文字が見えてしまう対策で透明にしていたのを解除するためのものです。これをしないと子要素全て透明で何も見えないです。
