<div id="background-animation-container">
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
  <div class="ani-bubble"></div>
</div>

<div id="content-container">
  <h1>Background Animation Test 1.5</h1>
  <p>Using a bubble animation effect.</p>
</div>

body {
  background-color: #333;
  color: white;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

#background-animation-container {
  background-color: #222;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1000;
}

.ani-bubble {
  background-color: blue;
  border-radius: 75px;
  height: 150px;
  position: absolute;
  top: 100%;
  width: 150px;

  -webkit-animation: bubblemove 10s linear infinite;
  -moz-animation: bubblemove 10s linear infinite;
  animation: bubblemove 10s linear infinite;
}

@-webkit-keyframes bubblemove {
  from { top: 100%; }
  to   { top: -600px; }
}
@-moz-keyframes bubblemove {
  from { top: 100%; }
  to   { top: -600px; }
}
@keyframes bubblemove {
  from { top: 100%; }
  to   { top: -600px; } /* This must be far enough off screen to allow the largest object to wander off with enough delay before restarting at the bottom, to be caught by the interval timer */
}

var mybubbles = document.getElementsByClassName("ani-bubble");

var bubblecolors = [ "#c5a5ab", "#e3e2dd", "#87a6c0" ];

for (var i = 0; i < mybubbles.length; i++) {

  mybubbles[i].style.backgroundColor = bubblecolors[Math.floor(Math.random() * bubblecolors.length)];
  mybubbles[i].style.opacity = Math.random()*.75;

  var bubblesize = (Math.floor(Math.random() * 9)+2) * 50;

  mybubbles[i].style.width = bubblesize+"px";
  mybubbles[i].style.height = bubblesize+"px";
  mybubbles[i].style.borderRadius = (bubblesize/2)+"px";

  mybubbles[i].style.left = Math.floor(Math.random() * 100) + "%";

  mybubbles[i].style.animationDuration = Math.floor(Math.random() * 16)+8 + "s";
  mybubbles[i].style.animationDelay = Math.floor(Math.random() * 8) + "s";

}

$( document ).ready(function() {
  jQuery.expr.filters.offscreen = function(el) {
  return (
      (el.offsetLeft + el.offsetWidth) < 0 
      || (el.offsetTop + el.offsetHeight) < 0
      || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
    );  
    };
  setInterval(function(){
    $('.ani-bubble').each(function(){
      if($(this).is(':offscreen')){
       var bubbleoffset = Math.floor((Math.random() * 140) - 19);
         $(this).css({ 'left': bubbleoffset+'%' }); 
      }
    });
  },50);
});