<div id="h1" style="left:-150px;-webkit-transform:rotate(7deg)">
</div>
<div id="h3" style="right:-140px;-webkit-transform:rotate(-7deg)"></div>
<div class="reveal">
  <div class="revealleft"></div>
  <div class="revealright"></div>
  <button onclick="$('.revealleft,.revealright').toggleClass('revealed');Launch()">Reveal</button>
  <h1>A SURPRISE!</h1>
  <p>
    <img src="http://www.fndvisions.org/img/cutecat.jpg"></img>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis augue luctus, auctor eros at, commodo purus. Suspendisse potenti. Ut vel blandit nibh. Mauris luctus mollis turpis, at euismod
    quam fermentum iaculis. Donec non lectus vel purus porta ornare et vitae est. Sed porta luctus purus, at hendrerit lorem congue nec.</p>
</div>
html,body{background:#e6e6e6;width:100%;height:100%;padding:0;margin:0;overflow:hidden}
.reveal{width:600px;height:350px;box-shadow:0 0 30px -5px grey;background:#fff;margin:calc(50vh - 175px) auto;max-width:96%;position:relative;overflow:hidden}
.revealleft,.revealright{width:50%;background:#dc143c;height:100%;position:absolute;left:0;transition:all 1s}
.revealright{left:50%}
.revealleft.revealed{left:-50%}
.revealright.revealed{left:100%}
.reveal button{opacity:.99;margin:15px;padding:8px 15px;background:#dc143c;border:2px solid #fff;border-radius:6px;color:#fff;cursor:pointer;position:absolute}
.reveal button:hover{background:#fff;color:#dc143c;outline:0;border-color:#dc143c}
.reveal button:focus{outline:0}
h1{font-family:'Montserrat',sans-serif;font-size:4vw;margin:50px 30px 35px;text-align:center;color:#dc143c}
p{margin:0 30px;font-family:'Montserrat',sans-serif;color:grey;font-size:.8em;line-height:1.7em}
img{width:160px;float:right;margin:5px 0 5px 20px}
.ball{width:10px;height:10px;border-radius:100%;position:absolute;bottom:20px;left:50%;background:#dc143c}
#h1,#h3{position:absolute;bottom:-15px;width:300px;height:100%;z-index:100;pointer-events:none;-webkit-transform-origin:center bottom}
function g(a, n) {
  var divs = "";
  for (var s = 0; s < 50; s++) {
    divs += '<div class="div ball"  id="' + getRandom() + '"></div>';
  }
  document.getElementById(a).innerHTML += divs;
}
g('h1');
g('h3');

function f(x, n, a) {
  var t = 0;
  setInterval(function() {
    if (t < 50) {
      x.style.bottom = (46 * t * n - t * t) + 20 + 'px';
      x.style.height = 10 - t / 4.6 + 'px';
      x.style.width = 10 - t / 4.6 + 'px';
      if (t > 15) {
        x.style.left = (a * t + 150) + 'px';
        x.style.bottom = (46 * t * n * n - t * t) + 20 + 'px';
      }
      t += 1.3
    }
  }, 50)
}

function Launch() {
  if ($('.revealleft,.revealright').hasClass('revealed')) {
    var i;
    for (i = 0; i < 150; i++) {
      var x = document.getElementsByClassName('div')[i];
      var a = parseInt(x.id);
      x.style.left = '150px';
      f(x, 1 + ((Math.random() * 5) + 1) / 100, a)
    }
  }
}

function getRandom() {
  return Math.random() * 10 - 5
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:400,700

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js