Cara Membuat Icon Animasi Pada Sebuah Website

Di bawah ini kita akan mempelajari cara menggunakan ikon untuk membuat efek animasi.

Section Artikel

1 Pengisian Baterai
- 1.1 Penjelasan Kode
2 Ikon Animasi Lainnya

Pengisian Baterai

<!DOCTYPE html>
<html>
<style>
#div1 {
  font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

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

<script>
function chargebattery() {
  var a;
  a = document.getElementById("div1");
  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>

<p> Contoh ini menunjukkan cara menggunakan pustaka ikon untuk membuat efek animasi.</p>
</body>
</html>

Langkah 1) Tambahkan HTML:
Contoh

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

Langkah 2) Sertakan Font Awesome Icon Library:
Contoh

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

Langkah 3) Tambahkan JavaScript:
Contoh

<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>

Penjelasan Kode

Kode di atas merupakan animasi dimana icon baterai yang sedang di iisi, terlihatnya hanya ada satu icon tapi sebenarnya ada lima ikon yang berbeda sedang ditampilkan.

Fungsi chargebattery() yang akan melakukan semua penggantian dan tampilan ikon.

Fungsi ini dimulai dengan menampilkan ikon baterai kosong:

Setelah satu detik, ikon tersebut diganti dengan ikon baru:

Ikon diganti dengan ikon baru setiap detik, sampai “baterai terisi penuh”:

Proses ini diulangi setiap 5 detik, sehingga seolah-olah baterai sedang diisi.

Ikon Animasi Lainnya

Jam Pasir

<!DOCTYPE html>
<html>
<style>
#div1 {
  font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

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

<script>
function hourglass() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 2000);
}
hourglass();
setInterval(hourglass, 3000);
</script>

<p>Contoh ini menunjukkan cara menggunakan pustaka ikon untuk membuat efek animasi.</p>
</body>
</html>

Rantai

<!DOCTYPE html>
<html>
<style>
#div1 {
  font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

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

<script>
function brakechain() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
}
brakechain();
setInterval(brakechain, 2000);
</script>

<p>Contoh ini menunjukkan cara menggunakan pustaka ikon untuk membuat efek animasi.</p>
</body>
</html>

Bintang

<!DOCTYPE html>
<html>
<style>
#div1 {
  font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

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

<script>
function ratestar() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 2000);
}
ratestar();
setInterval(ratestar, 3000);
</script>

<p> Contoh ini menunjukkan cara menggunakan pustaka ikon untuk membuat efek animasi.</p>
</body>
</html>

Folder

<!DOCTYPE html>
<html>
<style>
#div1 {
  font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

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

<script>
function openfolder() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
}
openfolder();
setInterval(openfolder, 2000);
</script>

<p>Contoh ini menunjukkan cara menggunakan pustaka ikon untuk membuat efek animasi.</p>
</body>
</html>

Emotikon

<!DOCTYPE html>
<html>
<style>
#div1 {
  font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

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

<script>
function smile() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 2000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 3000);
}
smile();
setInterval(smile, 4000);
</script>

<p>Contoh ini menunjukkan cara menggunakan pustaka ikon untuk membuat efek animasi.</p>
</body>
</html>

Jari

<!DOCTYPE html>
<html>
<style>
#div1 {
  font-size:48px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

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

<script>
function hand() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 500);
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 1500);
}
hand();
setInterval(hand, 2000);
</script>

<p>Contoh ini menunjukkan cara menggunakan pustaka ikon untuk membuat efek animasi.</p>
</body>
</html>

CSS How To