Membuat Font Awesome Animasi Dengan JavaScript


Membuat Font Awesome Animasi Dengan JavaScript

Assalamualaikum Wr. Wb.
Pada kesempatan kali ini saya akan kasih tau cara bagaimana cara membuat Font Awesome Bergerak cukup dengan JavaScript, saat ini Font Awesome makin banyak di gunakan pada penguna pembuat template, Karena Font Awesome yang di lengkapi dengan kreasi logo atau Icons yang lengkap. Dan pemasanagnnya juga mudah, oke langsung aja yuk simak tutorialnya

Pertama, pastekan code berikut sebelum </head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
body{
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background: #009688;
  color:#fff;
  text-align: center;
}

h2{
  margin:50px 0px;
}

.bg{
  height:60px;
  line-height: 60px;
  border-radius: 5px;
  box-shadow: 0px 1px 5px rgba(0,0,0,.3);
  font-family: FontAwesome;
  font-size: 30px;
  background: #FF9800;
}
</style>

 

Selanjutnya, copy dan pastekan kode CSS berikut setelah <body> dan sebelum </body>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>Animation Font Awesome Icons With JavaScript</h2>
    </div>
    <div class="col-md-1 col-md-offset-3">
      <p class="bg" id="battery">&#xf244;</p>
    </div>
    <div class="col-md-1">
      <p class="bg" id="thermometer">&#xf2cb;</p>
    </div>
    <div class="col-md-1">
      <p class="bg" id="face">&#xf118;</p>
    </div>
    <div class="col-md-1">
      <p class="bg" id="envelope">&#xf0e0;</p>
    </div>
    <div class="col-md-1">
      <p class="bg" id="folder">&#xf07b;</p>
    </div>
    <div class="col-md-1">
      <p class="bg" id="hourglass">&#xf251;</p>
    </div>
  </div>
</div>

Catatan: Silakan ganti yang saya beri warna dengan font awesome yang di inginkan, tapi harus mengikuti yang ada JavaScript nanti ya

 

Terakhir, copy dan pastekan kode JavaScript berikut tepat diatas </body>

<script>
//Battery Animation
    function batteryFn(){
        setTimeout(function(){
            let battery = document.getElementById('battery').innerHTML = "&#xf244;";
        },500);
        setTimeout(function(){
            let battery = document.getElementById('battery').innerHTML = "&#xf243;";
        },1000);
        setTimeout(function(){
            let battery = document.getElementById('battery').innerHTML = "&#xf242;";
        },1500);
        setTimeout(function(){
            let battery = document.getElementById('battery').innerHTML = "&#xf241;";
        },2000);
        setTimeout(function(){
            let battery = document.getElementById('battery').innerHTML = "&#xf240;";
        },2500);
    }
    setInterval(batteryFn, 3000);
    batteryFn();
    //Thermometer Animation
    function thermometerFn(){
        setTimeout(function(){
            let thermometer = document.getElementById('thermometer').innerHTML = "&#xf2cb;";
        },500);
        setTimeout(function(){
            let thermometer = document.getElementById('thermometer').innerHTML = "&#xf2ca;";
        },1000);
        setTimeout(function(){
            let thermometer = document.getElementById('thermometer').innerHTML = "&#xf2c9;";
        },1500);
        setTimeout(function(){
            let thermometer = document.getElementById('thermometer').innerHTML = "&#xf2c8;";
        },2000);
        setTimeout(function(){
            let thermometer = document.getElementById('thermometer').innerHTML = "&#xf2c7;";
        },2500);
    }
    setInterval(thermometerFn, 3000);
    thermometerFn();
    //Face Animation
    function faceFn(){
        setTimeout(function(){
            let face = document.getElementById('face').innerHTML = "&#xf118;";
        },1000);
        setTimeout(function(){
            let face = document.getElementById('face').innerHTML = "&#xf11a;";
        },2000);
        setTimeout(function(){
            let face = document.getElementById('face').innerHTML = "&#xf119;";
        },3000);
    }
    setInterval(faceFn, 4000);
    faceFn();

    //Envelope Animation
    function envelopeFu(){
        setTimeout(function(){
            let envelope = document.getElementById('envelope').innerHTML = "&#xf0e0";
        },500);
        setTimeout(function(){
            let envelope = document.getElementById('envelope').innerHTML = "&#xf2b6";
        },1500);
    }
    setInterval(envelopeFu, 2000);
    envelopeFu();

    //folder Animation
    function folderFu(){
        setTimeout(function(){
            let folder = document.getElementById('folder').innerHTML = "&#xf07b";
        },600);
        setTimeout(function(){
            let folder = document.getElementById('folder').innerHTML = "&#xf07c";
        },1200);
    }
    setInterval(folderFu, 1800);
    folderFu();

    //hourglass Animation

    function hourglassFn(){
        setTimeout(function(){
            let hourglass = document.getElementById('hourglass').innerHTML = "&#xf251;";
            document.getElementById('hourglass').style.transition = "all .5s";
            
        },1000);
        setTimeout(function(){
            let hourglass = document.getElementById('hourglass').innerHTML = "&#xf252;";
            document.getElementById('hourglass').style.transition = "all .5s";
            
        },2000);
        setTimeout(function(){
            var hourglass = document.getElementById('hourglass').innerHTML = "&#xf253;";
            document.getElementById('hourglass').style.transition = "all .5s";
        },3000);
    }
    setInterval(hourglassFn, 3500);
    hourglassFn();
</script>

Catatan: Silakan ubah yang saya tandai dengan font awesome yang di inginkan, nantinya css akan menyesuaikan

 

 

Oke,  jadi seperti itulah untuk membuat font awesome animasi. untuk melihat hasil jadinya, silakan klik disini. selamat mencoba, dan semoga bermanfaat ya!

Wassalamualaikum Wr. Wb.


http://short.erllang.ga/AYO8F

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Membuat Font Awesome Animasi Dengan JavaScript