balanca.js

function Balanca(idParent){

  var idBraco = "js-balanca-braco";
  var idPesoEsquerdo = "js-balanca-peso-esq";
  var idPesoDireito = "js-balanca-peso-dir";
  var idLegendaEsquerda = "js-peso-legenda-esq";
  var idLegendaDireita = "js-peso-legenda-dir";
  var elParent;

  var corLegendaEsquerda = "#000";
  var corLegendaDireita = "#000";

  var animacaoAtual = null;

  this.peso = "";
  this.direcao = "";
  this.prefixoLegenda = "";

  var init = function(){
    var css = "@charset 'UTF-8';.balanca{position:relative;display:block;width:100%;height:100%}.balanca__braco,.balanca__mastro,.balanca__peso{position:absolute;display:block}.balanca__peso>img,.balanca__peso__legenda{position:absolute;display:block;margin:0;padding:0;color:#000}.balanca__mastro{height:100%;top:0;left:50%;transform:translateX(-50%)}.balanca__braco{max-width:80%;top:5%;left:10%;right:10%;transition:.4s;transform-origin:50% 30%}.balanca__peso-dir,.balanca__peso-esq{transform-origin:50% 1%}.balanca__peso{height:52%;width:27%;top:14%;transition:.45s}.balanca__peso>img{max-height:100%;top:0;left:0}.balanca__peso-esq{left:2%}.balanca__peso-dir{right:2%}.balanca__peso__legenda{width:100%;text-align:center;font-family:Sans-serif;font-size:12pt;bottom:-12pt;left:0;right:0;font-weight:700}.pende-esq-10{transform:rotate(-10deg)}.pende-esq-15{transform:rotate(-15deg)}.pende-esq-20{transform:rotate(-20deg)}.pende-dir-10{transform:rotate(10deg)}.pende-dir-15{transform:rotate(15deg)}.pende-dir-20{transform:rotate(20deg)}.desce-peso-esq-10{transform:translate(7%,12%)}.desce-peso-esq-15{transform:translate(12%,17%)}.desce-peso-esq-20{transform:translate(17%,22%)}.sobe-peso-esq-10{transform:translate(-3%,-12%)}.sobe-peso-esq-15{transform:translate(-3%,-18%)}.sobe-peso-esq-20{transform:translate(-3%,-24%)}.desce-peso-dir-10{transform:translate(-7%,12%)}.desce-peso-dir-15{transform:translate(-12%,17%)}.desce-peso-dir-20{transform:translate(-17%,22%)}.sobe-peso-dir-10{transform:translate(3%,-12%)}.sobe-peso-dir-15{transform:translate(3%,-18%)}.sobe-peso-dir-20{transform:translate(2%,-23%)}";

    var html = "<div class='balanca'>  <img class='balanca__mastro' src='http://lojavirtual.sysnobre.com.br/uncaflow/img/pau.png'/>  <img id='js-balanca-braco' class='balanca__braco' src='http://lojavirtual.sysnobre.com.br/uncaflow/img/braco.png'/>  <div id='js-balanca-peso-esq' class='balanca__peso balanca__peso-esq'> <img src='http://lojavirtual.sysnobre.com.br/uncaflow/img/peso.png'/> <p id='js-peso-legenda-esq' class='balanca__peso__legenda'></p></div><div id='js-balanca-peso-dir' class='balanca__peso balanca__peso-dir'>   <img src='http://lojavirtual.sysnobre.com.br/uncaflow/img/peso.png'/> <p id='js-peso-legenda-dir' class='balanca__peso__legenda'></p></div></div>";

    elParent = document.getElementById(idParent);

    elParent.insertAdjacentHTML('beforeend', '<style>' + css + '</style>');
    elParent.insertAdjacentHTML('beforeend', html);
  }();

  this.setLegendaEsquerda = function(texto, cor){
    var legenda = document.getElementById(idLegendaEsquerda);
    legenda.innerHTML = (this.prefixoLegenda + " " + texto).trim();
    legenda.style.color = cor;
  }

  this.setLegendaDireita = function(texto, cor){
    var legenda = document.getElementById(idLegendaDireita);
    legenda.innerHTML = (this.prefixoLegenda + " " + texto).trim();
    legenda.style.color = cor;
  }

  this.pesar = function(pesoEsquerda, pesoDireita, atualizaLegenda = false){
    //Calcular a diferença do peso em porcentagem
    pesoEsquerda = parseInt(pesoEsquerda);
    pesoDireita = parseInt(pesoDireita);

    var dif = (Math.abs(pesoEsquerda - pesoDireita) * 100) / (pesoEsquerda + pesoDireita);
    var peso, direcao;

    console.log("total: " + (pesoEsquerda + pesoDireita));
    console.log("dif: " + Math.abs(pesoEsquerda - pesoDireita));
    console.log("dif pct: " + dif);


    if(pesoDireita == pesoEsquerda){
      direcao = "meio";
    }
    else if(pesoDireita > pesoEsquerda){
      direcao = "direita";
    }
    else{
      direcao = "esquerda";
    }

    if(dif <= 15){
      peso = "leve";
    }
    else if(dif <= 50){
      peso = "medio";
    }
    else{
      peso = "pesado";
    }

    if(atualizaLegenda){
      this.setLegendaEsquerda(pesoEsquerda);
      this.setLegendaDireita(pesoDireita);
    }

    this.atualizaBalanca(direcao, peso);
  }

  this.atualizaBalanca = function(direcao, peso){
    var grau;

    var animBraco, animPesoEsq, animPesoDir;

    switch(peso) {
      case "leve":
        grau = 10;
        break;
      case "medio":
        grau = 15;
        break;
      case "pesado":
        grau = 20;
        break;
      default:
        grau = 10;
    }

    if(direcao == "meio"){
      animBraco = "";
      animPesoEsq = "";
      animPesoDir = "";
    }
    else if(direcao == "esquerda"){
      animBraco = "pende-esq-" + grau;
      animPesoEsq = "desce-peso-esq-" + grau;
      animPesoDir = "sobe-peso-dir-" + grau;
    }
    else if(direcao == "direita"){
      animBraco = "pende-dir-" + grau;  
      animPesoDir = "desce-peso-dir-" + grau;
      animPesoEsq = "sobe-peso-esq-" + grau;
    }

    this.peso = peso;
    this.direcao = direcao;	

    if(animacaoAtual != null){
      document.getElementById(idBraco).classList.remove(animacaoAtual.braco);
      document.getElementById(idPesoEsquerdo).classList.remove(animacaoAtual.esq);
      document.getElementById(idPesoDireito).classList.remove(animacaoAtual.dir);
    }

    document.getElementById(idBraco).classList.add(animBraco);
    document.getElementById(idPesoEsquerdo).classList.add(animPesoEsq);
    document.getElementById(idPesoDireito).classList.add(animPesoDir);

    animacaoAtual = {braco: animBraco, esq: animPesoEsq, dir: animPesoDir};

  };

}

demo.html

<div id="js-balanca-parent" style="height: 300px; width: 300px;"></div>

<div>
  <br/>

  <label for="js-peso-esquerdo">Peso no lado esquerdo</label><br/>
  <input type="number" id="js-peso-esquerdo" min="0" value="0"/>

  <br/><br/>

  <label for="js-peso-direito">Peso no lado direito</label><br/>
  <input type="number" id="js-peso-direito" min="0" value="0"/>

  <br/>
</div>

<script type="text/javascript" src="balanca.js"></script>
<script>
  var balanca = new Balanca("js-balanca-parent");
  var inPesoEsquerdo = document.getElementById("js-peso-esquerdo");
  var inPesoDireito = document.getElementById("js-peso-direito");

  inPesoEsquerdo.addEventListener("keyup", function(event){
    pesa(inPesoEsquerdo.value, inPesoDireito.value);
  });

  inPesoDireito.addEventListener("keyup", function(event){
    pesa(inPesoEsquerdo.value, inPesoDireito.value);
  });

  inPesoEsquerdo.addEventListener("mouseup", function(event){
    pesa(inPesoEsquerdo.value, inPesoDireito.value);
  });

  inPesoDireito.addEventListener("mouseup", function(event){
    pesa(inPesoEsquerdo.value, inPesoDireito.value);
  });

  function pesa(esquerda, direita){
    balanca.pesar(esquerda, direita, true);
  }

</script>