Hareketli Font Awesome İkonları

YouTube'ta Takip Et →

Font Awesome fontlarını kullanarak onlara hareket verebiliyoruz. Font Awesome’a hareket verirken JavaScript’in setTimeout ve setInterval fonksiyonlarından faydalanacağız. Bu tip animasyonları projelerinizde çeşitli yaratıcılıklarda kullanarak renk katabilirsiniz.

Biraz daha detaya inerek bu tür animasyonları nerelerde kullanabileceğimize de bakalım. Böylece neden böyle bir şeye ihtiyacımız olduğu konusunda fikir sahibi olabiliriz.

Bu içerik ilginizi çekebilir.

Font Awesome, batarya üzerinde çeşitli doluluk oranlarıyla veriyor. Yani boş bataryadan dolu bataryaya doğru verdiğimiz bir animasyonda batarya doluyor görüntüsü sağlayabiliriz. Ya da bir boş bataryayı yanıp söndürerek batarya bitiyor mesajı verebiliriz. Göz önünde bulundurmamız gereken iki kod var. Biri aşağıdaki HTML kodu. Bu kodu animasyonun görünmesini istediğiniz yere yapıştırın.

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

Aşağıdaki JavaScript kodları ise dümenin asıl döndüğü yer. Font Awesome’ın ikonlarının Unicode karşılıklarını ilgili yerlere ekleyerek animasyonun görünmesini sağlıyoruz.

<script>function chargeBattery(){
      let battery = document.getElementById('battery');
      battery.innerHTML = "&#xf244;";
      setTimeout(function(){
        battery.innerHTML = "&#xf243;";
      }, 500);
      setTimeout(function(){
        battery.innerHTML = "&#xf242;";
      }, 1000);
      setTimeout(function(){
        battery.innerHTML = "&#xf241;";
      }, 1500);
      setTimeout(function(){
        battery.innerHTML = "&#xf240;";
      }, 2000);
    }

    chargeBattery();
    setInterval(chargeBattery, 2500);</script>

Dolan bir kum saati için de benzer animasyonları kullanabiliriz. Font Awesome’a nasıl animasyon verdiğimi görmek için videoyu izleyebilirsiniz.