Hoe - Pictogrammen animeren
Leer hoe u pictogrammen kunt gebruiken om een geanimeerd effect te maken.
Batterij opladen
Stap 1) HTML toevoegen:
Voorbeeld
<div id="charging" class="fa"></div>
Stap 2) Voeg de Font Awesome Icon Library toe:
Voorbeeld
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Lees meer over Font Awesome in onze Font Awesome Tutorial .
Stap 3) Voeg een JavaScript toe:
Voorbeeld
<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>
Voorbeeld uitgelegd
Het voorbeeld geeft een indruk van het opladen van een batterij, maar in plaats daarvan worden vijf verschillende pictogrammen weergegeven.
Een aangeroepen functie chargebattery()
doet al het vervangen en weergeven van pictogrammen.
De functie begint met het weergeven van een pictogram voor een lege batterij:
Na één seconde wordt het pictogram vervangen door een nieuw pictogram:
Het pictogram wordt elke seconde vervangen door een nieuw pictogram, totdat "de batterij volledig is opgeladen":
Dit proces wordt elke 5 seconden herhaald, waardoor het lijkt alsof de batterij wordt opgeladen.
Meer geanimeerde pictogrammen
Voorbeeld
Voorbeeld
Voorbeeld
Voorbeeld
Voorbeeld
Voorbeeld