<h1>Example Text</h1>

<button id="btn">BLAST TEXT</button>


<p class="p">Demo by Jérémy Heleine. <a href="http://www.sitepoint.com/animating-text-with-blast-js" target="_blank">See article</a>.</p>
body {
  text-align: center;
}

h1 {
  color: firebrick;
  font-size: 50px;
}

button {
  font-size: 20px;
  color: black;
}

.p {
  margin-top: 120px;
  font-size: 13px;
}
$(function() {
  
  $('#btn').on('click', function () {
    // Blasts the title
    var chars = $('h1').blast({
      delimiter: 'character'
    });

    // Animation character per character
    chars.each(function(i) {
      // Initialization of the position
      $(this).css({
        position: 'relative',
        left: 0
      })

      // Delay: we don't want to animate characters simultaneously
        .delay(i * 45)

      // Animation: to the right!
        .animate({left: '50px'}, 300);
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/blast.js