Javascriptを使って文字が大きくなるアニメーションを作ります。

完成見本
[リンク]https://i.gyazo.com/5f09aecd2bc47701dd396d3d515e703d.gif

index.html

<body>
    <h1 id="text">この文字が大きくなります</h1>

    <script>
        //JavaScriptを記述する場所
    </script>
</body>

h1の文字にアニメーションを加えるので、getElementById()を用いてID属性の要素を取得します。

index.html

<body>
    <h1 id="text">この文字が大きくなります</h1>

    <script>
        var h1 = document.getElementById("text");
    </script>
</body>

CSSのmargin、fontSizeなどの値を変化させていけば動いているように見えます。

index.html

<script>
    var h1 = document.getElementById("text");
    let count = 0;

    var timer = setInterval(() => {
        h1.style.fontSize = count + `px`;
        count++;

        if (count >= 100) clearInterval(timer);
    }, 10);
</script>

この記述により、fontSizeが0から100になるまで1ずつ加算されます。
setInterval()を用いて処理が見えるようにします。最後に記述している10が繰り返し処理の速度です。
claerInterval()メソッドにより繰り返し処理を終了させます。

これでアニメーションをつけることができました。

Javascriptを使って文字が大きくなるアニメーションを作ろう

Javascriptを使って文字が大きくなるアニメーションを作ります。