Reveal Effect

index.html

<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>

Reveal Effect.markdown

Reveal Effect

with a little firecrackers

A Pen by Ariana Lynn on CodePen.

License.

script.js

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
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

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}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />