#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()メソッドにより繰り返し処理を終了させます。
これでアニメーションをつけることができました。