Learn free online HTML5, javascript, and jquery Tutorials by Examples

Friday, 5 January 2018

Animated font awesome Icons using JavaScript




<div id="chains" class="fa"></div><br />
<div id="label" class="fa"></div><br />
<div id="glass" class="fa"></div>

<style>
    #chains, #label, #glass{
      font-size:50px;
    }
  </style>

<script>
// Brake chains Animation
    function brakechains(){
      let chains = document.getElementById('chains');
      chains.innerHTML = "&#xf0c1;";

      setTimeout(function(){
        chains.innerHTML = "&#xf127;";
      }, 1000);
    }

    // Call Animation
    brakechains();

    // Animate Every 2 Seconds
    setInterval(brakechains, 2000);

/*
function breakchains(){
var chains = document.getElementById('chains');
//chains.innerHTML = "&#xf0c1;";
chains.setAttribute("class","fa fa-link");

setTimeout(function(){
//chains.innerHTML = "&#xf127;";
chains.setAttribute("class","fa fa-chains-broken");
}, 1000);
}
breakchains();
setInterval(breakchains, 2000);
//window.addEventListener("load", breakchains, false);
*/

    // label Charge Animation
    function chargelabel(){
      let label = document.getElementById('label');
      label.innerHTML = "&#xf244;";
      setTimeout(function(){
        label.innerHTML = "&#xf243;";
      }, 1000);
      setTimeout(function(){
        label.innerHTML = "&#xf242;";
      }, 2000);
      setTimeout(function(){
        label.innerHTML = "&#xf241;";
      }, 3000);
      setTimeout(function(){
        label.innerHTML = "&#xf240;";
      }, 4000);
    }

    // Run Animation
    chargelabel();

    // Run Animation Every 5 Seconds
    setInterval(chargelabel, 5000);

    // glass Tip Animation
    function glassTip(){
      let glass = document.getElementById('glass');
      glass.innerHTML = "&#xf251;";
      setTimeout(function(){
        glass.innerHTML = "&#xf252;";
      }, 1000);
      setTimeout(function(){
        glass.innerHTML = "&#xf253;";
      }, 2000);
    }

    // Run Animation
    glassTip();

    // Run Animation Every 3 Seconds
    setInterval(glassTip, 3000);
  </script>

No comments:

Post a Comment