Hoe te maken: animatiepictogram

Leer hoe je animatie-effecten kunt maken met pictogrammen.

Batterij opladen

Try it yourself

Eerste stap - Voeg HTML toe:

<div id="charging" class="fa"></div>

Tweede stap - Inclusief Font Awesome pictogrambibliotheek:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

In onze Font Awesome tutorial voor meer informatie over Font Awesome.

Derde stap - Voeg JavaScript toe:

<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

Voorbeeld uitleg:

Dit voorbeeld maakt indruk alsof de batterij aan het opladen is, maar in werkelijkheid worden er vijf verschillende pictogrammen weergegeven.

Een functie genaamd chargebattery() Deze functie is verantwoordelijk voor het vervangen en weergeven van alle pictogrammen.

Deze functie toont eerst een lege batterijpictogram:

Een seconde later wordt het pictogram vervangen door een nieuw pictogram:

Elke seconde wordt het huidige pictogram vervangen door een nieuw pictogram, totdat de "batterij vol is":

Deze proces herhaalt zich elke 5 seconden, waardoor het lijkt alsof de batterij aan het opladen is.

More animation icons

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself

Example

Try it yourself