چگونه ایجاد می‌شود: آیکون‌های انیمیشنی

آموزش نحوه استفاده از آیکون‌ها برای ایجاد اثرات انیمیشنی.

شارژ باتری

آزمایش کنید

مرحله اول - اضافه کردن HTML:

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

مرحله دوم - شامل کردن کتابخانه آیکون‌های Font Awesome:

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

در آموزش Font Awesome برای اطلاعات بیشتر در مورد Font Awesome ببینید.

مرحله سوم - اضافه کردن JavaScript:

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

آزمایش کنید

توضیح مثال:

این مثال این اثر را می‌دهد که باتری در حال شارژ است، اما در واقع پنج آیکون مختلف نمایش داده می‌شود.

یک نام chargebattery() این تابع مسئول جایگزینی و نمایش همه آیکون‌ها است.

این تابع ابتدا آیکون باتری خالی را نمایش می‌دهد:

یک ثانیه بعد، آیکون با آیکون جدید جایگزین می‌شود:

هر ثانیه یک آیکون جدید جایگزین آیکون فعلی می‌شود تا اینکه باتری به طور کامل شارژ شود:

این فرآیند هر 5 ثانیه یک بار تکرار می‌شود و باعث می‌شود که انگار باتری در حال شارژ است.

آیکون‌های انیمیشنی بیشتر

مثال

آزمایش کنید

مثال

آزمایش کنید

مثال

آزمایش کنید

مثال

آزمایش کنید

مثال

آزمایش کنید

مثال

آزمایش کنید