A recent question was posted up on the Divi Web Designers Facebook group asking how to create the typewriter text effect seen on this web page: https://www.stagemelody.com/.

I’ve recreated a similar effect using some jQuery (taken from this original code) and added some CSS to style the text and add a blinking cursor. This can be easily implement anywhere in Divi.

Before I show you how to do it, let’s see how it looks…

And here’s how to do it…

Step 1 – Add the jQuery script

• Go to your website Admin area
• Go to Divi > Theme Options
• Select the Integration tab
• Paste the code below into the box saying Add code to the < head > of your blog
• Save your Changes

Here’s the code:

<script>
(function ($) {
  // writes the string
  //
  function typeString($target, string, cursor, delaytyping, calllback) {
    $target.html(function (_, html) {
      return html + string[cursor];
    });

    if (cursor < string.length - 1) {
      setTimeout(function () {
        typeString($target, string, cursor + 1, delaytyping, calllback);
      }, delaytyping);
    }
    else {
      calllback();
    }
  }

  // clears the string after typing it
  function deleteString($target, delaydeleting, callback) {
    var length;

    $target.html(function (_, html) {
      length = html.length;
      return html.substr(0, length - 1);
    });

    if (length > 1) {
      setTimeout(function () {
        deleteString($target, delaydeleting, callback);
      }, delaydeleting);
    }
    else {
      callback();
    }
  }

  // jQuery hook
  $.fn.extend({
    typewritereffect: function (opts) {
      var settings = $.extend({}, $.typewritereffect.defaults, opts);

      return $(this).each(function () {
        (function loop($tar, idx) {
          // type
          typeString($tar, settings.text[idx], 0, settings.delaytyping, function () {
            // delete
            setTimeout(function () {
              deleteString($tar, settings.delaydeleting, function () {
                loop($tar, (idx + 1) % settings.text.length);
              });
            }, settings.pause);
          });

        }($(this), 0));
      });
    }
  });

  // Here you can set the default timings for the typewriter effects
  // 1) delaytyping: number of milliseconds between each character being typed
  // 2) delaydeleting: number of milliseconds between each character being removed
  // 3) pause: number of milliseconds to pause after a line is fully typed
  $.extend({
    typewritereffect: {
      defaults: {
        delaytyping: 150,
        delaydeleting: 50,
        pause: 1000,
        text: []
      }
    }
  });
}(jQuery));

jQuery(document).ready(function($) {

  // This bit types the text into our element with ID 'typewriter'
  // Update the values in the text array to display the text you want
  $('#typewriter').typewritereffect({
    text: ['create.','design.','develop.','promote.','consult.','and lots more!']
  });
}
)

</script>

Step 2 – Change the text you want to be displayed

In the script above, check out line 82 (highlighted). You will see there is an array of comma-separated text values in quotes which are they values being typed out in our example above. Change these to the text you want. You can add more values if you want and even have much longer sentences.

Step 3 – Add an element to display the effect

Add an element to any Divi module and assign it an ID of ‘typewriter’ and class of ‘typewriter_text’.

To create our example above, we added a Divi text module and put this in the Content section:

<p>We love to <span id='typewriter' class='typewriter_text'></span></p>

Step 4 – Add CSS to style the text and create the blinking cursor

Now let’s add the CSS to style the typed text and add a blinking cursor at the end. Add the code below in the same place as the jQuery script (in the Divi Theme options):

<style>
/* style the typewriter text specifically if you want */
.typewriter_text {
  color: #CA22B7;
}


/* Style the blinking cursor after the text */
.typewriter_text:after {
  content: "|";
  display: inline-block;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

/* Define the blink animation that runs */
@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
</style>

Adding more than one typewriter effect

You can use this code to add multiple elements on your site that each type out different text. To do this:
1) Create your new element and give it an ID (e.g. typewriter2)
2) Create a copy of lines 81-83 in the script, where it says:

$('#typewriter').typewritereffect({
    text: ['create.','design.','develop.','promote.','consult.','and lots more!']
  });

3) Update the jQuery selector in the copied code to use the ID of your element and also update the text values as you want, e.g.

$('#typewriter2').typewritereffect({
    text: ['new text.','new text 2.','awesomeness.','yet another typed text.']
  });

3) Save the code!

This can be repeated for as many elements as you want on your site.

Rounding up

Hopefully that wasn’t too difficult? You can now add a cool typewriter effect anywhere on your website!

If you found this useful, leave us a comment!

About the Author

Ed Solman

Entrepreneur, Blogger and Website Developer/Designer. Passionate about helping people and businesses develop and grow. Daredevil sportsbike enthusiast.