【Webアニメ】テキストを一文字ずつ動かす

JavaScript
動点P
動点P

テキストが動くアニメーションを作りたい！

動点Qちゃん
動点Qちゃん

では一文字ずつ動かせるようになりましょう・・・

テキストをアニメーションさせるとき、まとまった一つのブロックとして動くのではなく、一文字ずつ動きをつけて複雑な動きができるようになりたいですよね。

今回はJavaScriptで文字を一文字ずつ制御する方法を勉強してみました。

See the Pen text animation by inu (@tenp) on CodePen.

↑のようなアニメーションがつけられるようになります。

一文字ずつ動かすテキストアニメーションを作る

一文字ずつ動かすアニメーションを作るために、HTML、CSS、JavaScript　を書いていきます。

形を整える

<body>
    <main>
        <div class="move-text01">ふわっと、出るかんじ</div>
    </main>
</body>

まずHTMLに表示させたい文字をdivタグに入れてクラス名をつけておきます。

そしてCSSで必要な装飾をしておきます。

main {
    background-color: #fff;
	  color: rgb(189, 129, 129);
    font-size: 50px;
}

.move-text01 {
	    margin-top: 20px;
	margin-left: 20px;
	letter-spacing: -.1em;
}

必要最低限のものしか載せてませんが、とにかく好きなように見た目を整えます。

JavaScriptで制御する

今度はさきほど打ち込んだ文字列を取得して配列に入れます。

※コードについてはわかりやすいように省略している部分もありますので、同じように動かない可能性があることはご了承ください。

const target = document.querySelector(".move-text01");

target という変数にdivタグ要素をテキストごと入れました。

targetの中身　＜div class=”move-text01″＞ふわっと、出るかんじ＜/div＞

const text = target.textContent;

textContentで要素の文字列を取得しました。

textの中身　”ふわっと、出るかんじ”

target.textContent = "";

一文字ずつ出すために一回文字列を全部消しておきます。

targetの中身　＜div class=”move-text01″＞＜/div＞

textsArray = [];

一回配列の中に文字を入れておきたいので空の配列を作ります。

for (let i = 0; i < text.split("").length; i++) {
    const hitomozi = text.split("")[i];
    if (hitomozi === " ") {
        textsArray.push(" ");
        } else {
         textsArray.push('<span style="animation-delay: ' + (i * .2) + 's;">' + hitomozi + '</span>'); 
        }    
    }

さきほど作った textsArray の空の配列に一文字ずつ格納したいのですが、そのとき一文字ずつ制御するために各一文字を span タグで囲みながら格納しています。

まずfor文の (let i = 0; i < text.split(“”).length; i++) の

text.split(“”)

の部分で、すでに文字列を一文字ずつ配列に格納しています。

text.split(“”) の中身は [“ふ”,”わ”,”っ”,”と”,”、”,”出”,”る”,”か”,”ん”,”じ”]　です。

これをさらにspanタグで囲いたいというわけです。

なのでtext.split(“”).length で文字列数分for文で回しながら

const hitomozi = text.split(“”)[i]　で hitomozi という変数の中に一文字ずつ入れ、それを

textsArray.push(”＜span＞+ hitomozi + ＜/span＞”)

でtextArray配列の中に span タグで囲みながら格納していきます。このときspanにstyle=”animation-delay: i *〇”をつけることで、一文字ずつ時間差をつけてアニメーションさせることが可能になります。

if文があるのは、半角の空白があるとき、そこにアニメーションがついてしまわず、なおかつきちんと空白があくように、spanタグをつけずにただの空白として配列の中へ入れるためです。

if (hitomozi === ” “) その文字が空白だったときはtextsArray.push(” “);配列に空白を入れ、else その他のときはtextsArray.push (”＜span＞+ hitomozi + ＜/span＞”) spanで囲むという意味です。

for (let j = 0; j < textsArray.length; j++) {
   target.innerHTML += textsArray[j];  
    }

配列にspanタグで囲んだ文字を入れる準備ができましたら、その一つ一つを

target.innerHTML

で、空のタグ要素であるtargetのHTML要素の中身を書き込んでいきます。+= textsArray[j]で配列に入っている文字をspanタグごと入れていきます。

コンソール画面キャプチャ

これで今 target = move-text01のクラス名がついたdivタグは上記のような内容になっています。それぞれ一文字がspanタグで囲まれ、animation-delayが順番に遅くなるようつけられています。

アニメーションをつける

今度は、一文字につけるアニメーションを作っていきます。

@keyframes move {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
    }
}

なんでもよいですが、例えばこれは下からふわっと現れてくる文字の動きです。

.move-text01 span {
    display: inline-block;
    animation: move 3s backwards;
}

動きをつけたら、あとはspanタグにanimationをつけて完成です。

まとめ

やはりJavaScriptで一文字ずつ制御するところが難しいかと思います。とにかく配列にspanタグで囲って入れる。そのときにanimation-delayをつけるというところがポイントです。

これができれば、あとはタイミングや装飾や動きを変えて、かなりオリジナリティのあるテキストアニメーションが作れるようになるはずです。

コメント