このようなアニメーションがなんて名前なのかわかりませんが、画面から文字が次々に降ってきたりわいてきたりするようなアニメーションです。fromSmall">エンジニア</p>説明js-amination:JSによるアニメーション対象DOM判定用entryScaleChange:アニメーションの種類。sclaleの値を変更することで登場するので。fromBig:entryScaleChangeのオプション。大きいのから小さくなって表示すると降ってきているように見える。fromSmall:entryScaleChangeのオプション。小さいのから大きくなって表示すると沸いてきているに見える。実はpタグのjs-animationスタイルは何も意味がない。いうのも、実際アニメーションするのはJSで作るpタグの子要素のspanタグだから。pタグ内部のspanタグを横並びにするスタイルと、最初に文字が見えてしまわないように透明にするスタイルを適用。noneで実装してしまうとその分のスペースまで消えてしまうので注意。アニメーションで表示する際に隣接する要素が動いているように見えてしまいます)spanタグには透明とブロック要素にするスタイルを適用します。ブロック要素でないとscaleが効かないので注意してください。scaleの初期値を設定します。ここら辺は文字サイズなどで変わると思うので変更して使ってください。今回は画面表示時のキャッチコピーを出現させるアニメーション用だったため、load時に発火するような作りとなっています。entryScaleChangeが複数行あっても対応できるようにdocument.querySelectorAll(“.js-amination.entryScaleChange”);としています。複数行ある場合にタイミングをずらす(順番に出るようにする)ために、for文のインデックスをsetTimeout関数の引数に使っています。ちなみにこのままだとページ内全ての対象アニメーションが動くことになります。タイミング違いがあるならクエリを変えてください。}}引数dom:対象の文字列をinnerTextに含んでいるDOM。引数のDOM.innerTextを一文字ずつspanタグで囲い、1秒後から0.1秒ずれて文字が表示されていく処理です。「〇秒後から×秒ずれて」はsleep関数の第一引数と第二引数内setTimeout関数に第二引数の値を変えれば変更可能です。アニメーション時間はCSSの方でかえてください。この関数の注意すべきは引数DOMのスタイル「不透明度」を1にしているところです。1;これはCSSの説明で記載した、最初から文字が見えてしまう対策で透明にしていたのを解除するためのものです。