<canvas id='bgCanvas'></canvas>
  <div id="foam_1"><img src="https://dl.dropboxusercontent.com/u/95690690/Web%20Design%20Public/png/beer_foam_edit.png" width="100%" height="auto"></div>
<div id="foam_2"><img src="https://dl.dropboxusercontent.com/u/95690690/Web%20Design%20Public/png/beer_foam_edit.png" width="100%" height="auto"></div>
  <div id="foam_3"><img src="https://dl.dropboxusercontent.com/u/95690690/Web%20Design%20Public/png/beer_foam_edit.png" width="100%" height="auto"></div>
  <div id="foam_4"><img src="https://dl.dropboxusercontent.com/u/95690690/Web%20Design%20Public/png/beer_foam_edit.png" width="100%" height="auto"></div>
  <div id="logo"><img src="https://dl.dropboxusercontent.com/u/95690690/Web%20Design%20Public/png/logo-Duff.png" width="300" height="auto"></div>

html{height:100%;}
body{
    margin:0;
    padding:0;
    height: 2000px;
    overflow: hidden;
    background: -webkit-radial-gradient(circle, #FBB600, #DA5900);
    font-family: calibri, serif;
    color:#d9d9d9;
}

#logo {
  z-index:3;
  display:block;
  position:relative;
  top:15%;
  width:100%;
  text-align:center;
}

#foam_1 {
  z-index:2;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  max-height:140px;
  opacity:1;
}

#foam_2 {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  opacity:0.5;
  -webkit-animation:schiuma_1 5s infinite ease-in-out;
  animation:schiuma_1 5s infinite ease-in-out;
}
@-webkit-keyframes schiuma_1 {
  0% {top:0px}
  50% {top:10px}
  100% {top:0px;}  
}
@keyframes schiuma_1 {
  0% {top:0px}
  50% {top:10px}
  100% {top:0px;}  
}

#foam_3 {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  opacity:0.4;
  -webkit-animation:schiuma_2 4s infinite ease-in-out;
  animation:schiuma_2 5s infinite ease-in-out;
}
@-webkit-keyframes schiuma_2 {
  0% {top:0px}
  30% {top:15px}
  100% {top:0px;}  
}
@keyframes schiuma_2 {
  0% {top:0px}
  30% {top:15px}
  100% {top:0px;}  
}
#foam_4 {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  opacity:0.3;
  -webkit-animation:schiuma_3 6s infinite ease-in-out;
  animation:schiuma_3 5s infinite ease-in-out;
}
@-webkit-keyframes schiuma_3 {
  0% {top:0px}
  60% {top:20px}
  100% {top:0px;}  
}
@keyframes schiuma_3 {
  0% {top:0px}
  60% {top:20px}
  100% {top:0px;}  
}

#bgCanvas{
    z-index:1;
    width:100%;
    height:100%;
    z-index: 10;
    top:0;
    left:0;
    position: absolute;
}

var canvas = document.getElementById('bgCanvas');
var ctx = canvas.getContext('2d');
var particles = [];
var particleCount = 400;

for(var i=0; i<particleCount;i++)
  particles.push(new particle());

function particle() {
  this.x = Math.random() * canvas.width;
  this.y = canvas.height + Math.random() * 300;
  this.speed = 1 + Math.random();
  this.radius = Math.random() * 3;
  this.opacity = (Math.random() * 100) / 1000;
}


function loop() {
  requestAnimationFrame(loop);
  draw();
}

function draw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  
  ctx.globalCompositeOperation = 'lighter';
  for(var i=0; i<particles.length; i++) {
    var p = particles[i];
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,255,255,' + p.opacity + ')';
    ctx.arc(p.x, p.y, p.radius, 0, Math.PI*2, false);
    ctx.fill();
    p.y -= p.speed;
    if(p.y <= -10)
      particles[i] = new particle();
  }
}

loop();