A CodePen by Nicolas Bevacqua.

index.html

<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Roboto' rel='stylesheet' type='text/css'>

<main>
  <h1>Feliz Semana de la Dulzura!</h1>
  <article>
    <p>Algo así era lo que estaba tratando de hacerte. Pero bueno, se rompió en <n>mil pedazos</b>, así que espero que entiendas si <i>no se ve del todo bien!</i></p>
    <p>Bueno, como te decía antes de que el chocolate que dibujé antes explote en mil pedazos y desaparezca <i>para siempre</i>... esto se supone que es un envoltorio de un chocolate. Vos imaginate e.. No, ya sé.. <b>pero</b>.. IMAGINATELO! Hace de cuenta que es un chocolate.</p>
    <p>Viste, como cuando eramos chicos.. No, sí, bueno. No nos conocíamos, pero seguro eramos parecidos. Bueno, <i>está bien</i>, vos te parecías más a Matilda que a mi, es cierto..</p>
    <p class='marquee'><marquee>Esto lo pongo acá para <b>confundirte</b> nada más, <i>de guacho que soy</i>!</marquee></p>
    <p><b>Dejá</b>, te compro uno. <i>UNO</i>!</p>
    <p>Igual sos una tonta, porque con este asunto del chocolate me distrajiste todo y ya me olvide que te iba a decir.</p>
    <p>En realidad no, pero <i>está re bueno</i> ver las <b>letritas</b> aparecer. Jajaja!</p>
    <p>
      Todo esto era para decirte que <b>TE AMO!!!</b> <i>Sorrrrrpresaaaa!</i><br/>
      <b>Felices ocho meses</b>, feliz <i>semana tuya</i>, y <i>feliz yo por estar con vos!</i>
    </p>
    <p class='haha'>
      Jaja, bueno, <i>dejo de molestarte</i>. Leelo tranquila.<br/>
      Ah, y coso. <a href=''>acá tenés cómo lo hice</a>, ahora que te estás convirtiendo en todo una <b>nerd</b>
    </p>
  </article>
</main>

script.js

var everything = document.querySelector('main'),
    character = 'char';

recurse(everything);

function recurse(element){
  var i, child, chars, frag, span;
  
  if(element.nodeType !== 3){
    for(i = 0; i < element.childNodes.length; i++){
      child = element.childNodes[i];
      if(child.className !== character){
        recurse(child);
      }
    }
    return;
  }
  
  if(element.nodeValue.trim().length === 0){
    return;
  }
  
  frag = document.createDocumentFragment();
  chars = element.nodeValue.split('');
  
  for(i = 0; i < chars.length; i++){
    span = document.createElement('span');
    span.className = character;
    span.innerText = chars[i];
    frag.appendChild(span);
  }
  
  element.parentNode.replaceChild(frag, element);
}

$(everything).fadeIn();

function r(min, max){ return  Math.random() * (max - min) + min; }
function sf(s,e,n,i){
  setTimeout(function(){
    var b = r(0,1) > 0.5,
        m = i ? 'fadeIn' :
            b ? 'fadeOut' : 'slideUp';
    n[m](r(350,650));
  }, r(s,e));
}

$('.char').not('.haha .char').each(function(){
  var char = $(this);
  
  sf(150, 20000, char, true);
  sf(25000, 28000, char, false);  
});

setTimeout(function(){
  $('.char').not('.marquee .char').each(function(){
    var char = $(this);
  
    sf(1500, 6000, char, true);
  });
}, 32000);

style.less

body {
  background-color: #fcc;
}

main {
  box-shadow: 1px 1px 5px #bd3034;
  border-top: 25px solid #bd3034;
  background-color: #ed3d41;
  max-width: 60%;
  margin: 30px auto;
  padding: 15px;
  text-align: center;
  display: none;
}

h1 {
  font-family: 'Gloria Hallelujah';
  font-size: 40px;
  color: #fcc;
  display: inline;
  border-bottom: 3px solid #fcc;
}

article {
  margin-top: 30px;
  font-family: 'Roboto';
  color: #fcc;
}

.char {
  display: none;
}

a {
  color: #fff;
}

a:hover {
  color: #fcc;
}