test pouring

by slawe

HTML

<div id="container">
  <div class="glass">
    <div class="beer"></div>
  </div>
  <div class="pour"></div>
</div>

CSS

body {
  background: #68a0b7;
}
#container {
  width: 100px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  margin-top: 70px;
}
#container .beer {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fac92c;
  bottom: 0;
  height: 0;
  transition: 1500ms ease-in;
}
#container .beer.fill {
  height: 100%;
}

#container .glass {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 10px #e8e4d9;
  border-top: solid 5px #e8e4d9;
  border-bottom: solid 30px #e8e4d9;
  border-radius: 5px;
  transform: perspective(500px) rotateX(-30deg);
}

#container .pour {
  position: absolute;
  width: 20px;
  height: 200%;
  background: #fac92c;
  border-radius: 20px;
  left: 10px;
  z-index: -1;
  bottom: 150%;
  transition: 300ms ease-in;
}
#container .pour.pouring {
  bottom: 0%;
}
#container .pour.end {
  height: 0;
}

JavaScript

$(function() {
  function beerRise() {
    $('.beer').addClass('fill');
  }
  function pourBeer() {
    $('.pour').addClass('pouring');
    beerRise();
    setTimeout(function() {
      $('.pour').addClass('end');
    }, 1500);
  }
  setTimeout(function() {
    pourBeer();
  }, 3000);
});