Blog
Select Page

Animate letters of a text using Blast.JS

Misc

Here I have used Blast.JS to encapsulate each letter of the text with <span> having a CSS property – ‘transition-delay’ value just a little later than the first letter and transformed it while clicking the animate button.

You can play with this and can animate any letter any way you want to create interesting effects. This is surely gonna amaze your audience if you use it on your website 😉

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/text-animation/index.html

Source Code

<!-- Created by webdevpuneet.com -->
<!doctype html>
<html lang="en">
  <head>
    <title>Animate letters of a text using Blast.JS</title>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <meta name="robots" content="INDEX,FOLLOW"/>
    <meta name="keywords" content="" />
    <meta name="description" content="Animate letters of a text using Blast.JS"/>
    <meta name="author" content="webdevpuneet.com" />
    <meta name="copyright" content="webdevpuneet.com" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/css/common.css">
    <script data-ad-client="ca-pub-2762737943861458" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  <body>
    <h1>Demo: Animate letters of a text using Blast.JS</h1>

    <div class="demo" style="margin-bottom:20px;">
      <h1 class="blasttext mb-5">Letters of this text will get animated after clicking the below button</h1>
      <button class="btn btn-primary" id="toggleanimate">Animate</button>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.blast.min.js"></script>
      <script src="./assets/js/common.js"></script>
    </div>

    <div class="article-link" style="margin-bottom:20px;">
      <a href="https://webdevpuneet.com/animate-letters-of-a-text-using-blast-js/" target="_blank" style="display: inline-block; color:blue:!important;text-decoration: none;border:1px solid blue;color:blue;line-height:1;border-radius:25px;font-size:14px;padding:5px 20px;display:inline-block;">View article and source code &raquo;</a>
    </div>
  </div>
  </body>
</html>

CSS

/* blasttext */
.blasttext span {
  display: inline-block;
  -webkit-transform: translateY(105%);
  -ms-transform: translateY(105%);
  transform: translateY(105%);
  opacity: 0.5;
}

.blasttext.active span {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

body {
  padding-top: 50px;
}

jQuery

$(document).ready(function() {
    $(".blasttext").blast({
        delimiter: "character", // Set the delimiter type (see left)
        search: false, // Perform a search *instead* of delimiting
        tag: "span", // Set the wrapping element type (e.g. "div")
        customClass: "", // Add a custom class to wrappers
        generateIndexID: false, // Add #customClass-i to wrappers
        generateValueClass: false, // Add .blast-word-val to wrappers
        stripHTMLTags: false, // Strip HTML before blasting
        returnGenerated: true, // Return generated elements to stack
        aria: true // Avoid speechflow disruption for screenreaders
    });

     $( ".blasttext" ).each(function(){
       $this = $(this);
       tags = $this.find('span');
       total = tags.length;
       for ( i = 0; i < total; i++ ) {
        tags[i].style.transition = 'all ' + .05 * (i+1) + 's ease ' + .05 * (i+1) + 's';
       }
     });

      $('#toggleanimate').click(function(){
        $('.blasttext').toggleClass('active');
      });
  });