アイコンを使用したアニメーション効果の作成方法を学習します。
<div id="charging" class="fa"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
Font Awesome の詳細については、Font Awesome チュートリアルをご覧ください。
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
Try it Yourself »
この例では、バッテリーが充電されているような印象を与えますが、実際は 5つのアイコンを表示しています。
chargebattery() という関数は、アイコンの置換と表示のすべて行います。
この関数は、空のバッテリーアイコンを表示することから始まります：
このアイコンは、1 秒後に新しいアイコンに置き換えられます：
「バッテリーが完全に充電される」まで、アイコンは 1 秒毎に新しいアイコンに置き換えられます：
このプロセスは 5 秒ごとに繰り返され、バッテリーが充電されていくように見えます。