Hareketli Font Awesome İkonları

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.

[postlink id=”2868″ title=”Web Sitelerinde Font Awesome Kullanımı”]

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 type="litespeed/javascript">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.

Popular Eğitimler

Prism JS Syntax Highlighter WordPress Kurulumu ve Kullanımı

Prism JS, syntax highlighter olarak tanımlanan bir script. Kod parçacıklarını göze hoş…

Google Fontlarını WOFF Formatında İndirerek Sunucuda Kullanmak

Site hızı optimizasyonu ve performans testlerinde daha yüksek sonuç alabilmek ya da…

Geri Sayım Sayacı Kodu (HTML ve JS)

Geri sayım kodlarını genellikle yapım aşaması sayfalarında sitenin açılacağı zamanı, bir kampanyanın…

Temel MySQL Komutları ve Kullanımı

Sıkça kullanılan, bilinmesi gereken temel MySQL komutları nelerdir? Tablo silme, veritabanı silme, ayrıntıları gösterme, veritabanı oluşturma kodlarının tek bir sayfada derlemesi.

HTML ve CSS ile Mouse Hover Efekti Buton Animasyonu

Hareketli butonlar insanların ilgisini çekebilir. Fare imleci ile üzerine gelindiğinde ilgi çekici…

Css ile Tam Sayfa Arkaplan Nasıl Yapılır?

CSS ile tam sayfa arkaplan nasıl yapılır? Üstelik bu tam ekran arkaplanın, ekran boyutuna göre otomatik olarak genişleyip daralması da CSS’in arkaplan özelliği ile mümkün.